ลำดับการเรนเดอร์เส้นขอบ MS Edge CSS

ฉันมีปัญหาเล็กน้อยกับ Microsoft Edge:

เป็นเรื่องเกี่ยวกับลำดับความสำคัญในการเรนเดอร์เส้นขอบของตารางเมื่อตั้งค่า border-collapse: collapse; ฉันได้อ่านเกี่ยวกับลำดับความสำคัญเหล่านั้นว่ามีกฎเกณฑ์ ซึ่งเส้นขอบจะแสดงผลด้วยลำดับความสำคัญที่สูงกว่า: จากที่สำคัญน้อยกว่าไปมีความสำคัญมากขึ้น: ตาราง, tbody, tr, td... รวมถึงรูปแบบเส้นขอบด้วย: สองเท่าบนเดี่ยวและอื่นๆ

ลักษณะการทำงานปกติสำหรับตารางที่มีเส้นขอบยุบและเส้นขอบด้านในที่มีสีต่างกันคือ เส้นขอบด้านใน 'ตก' ลงในด้านนอก: https://jsfiddle.net/fpyf1kL7/3/ (นี่เป็นเรื่องจริงสำหรับ Chrome, FF และ Edge)

ดังนั้นเพื่อไม่ให้เส้นขอบด้านใน 'ตก' ออกไปด้านนอก ฉันพบวิธีแก้ไขด่วนโดยตั้งค่ารูปแบบเส้นขอบของตารางให้เป็น 'สองเท่า' ในขณะที่ยังคงมีความกว้าง 1px (จึงปรากฏเป็น 'ทึบ): https://jsfiddle.net/fpyf1kL7/4/ แต่ใช้งานได้เฉพาะใน Chrome และ FF เท่านั้น ใน Microsoft Edge ขอบด้านในยังคง 'ตก' อยู่ด้านนอก

ฉันพบวิธีแก้ปัญหาสำหรับปัญหานั้นแล้วโดยใช้ border-collapse: separate; และ border-spacing: 0;: https://jsfiddle.net/fpyf1kL7/2/ . ใช้งานได้ใน Chrome, FF และ Edge แต่ตอนนี้เส้นขอบไม่ยุบอีกต่อไป ดังนั้นฉันจึงไม่สามารถมีเส้นขอบบนองค์ประกอบ tbody หรือ tr ได้อีกต่อไป และฉันต้องระวังไม่ให้มีเส้นขอบที่อยู่ติดกัน

คำถามที่แท้จริงมีดังนี้:

1. เหตุใด Microsoft Edge จึงจัดการกับปัญหาการเรนเดอร์เส้นขอบที่ถูกยุบแตกต่างออกไป
2. มีวิธีทำให้มันทำงานอย่างถูกต้อง (ไม่ 'ตกเลือด') ใน Microsoft Edge ที่มีเส้นขอบยุบหรือไม่