Chéo răng cưa đường chéo CSS trong Firefox

Question

Tôi đã vẽ hình bằng cách sử dụng thuộc tính đường viền trong CSS. Nó có vẻ tốt đẹp trong Chrome, nhưng trong Firefox biên giới thực sự xấu xí:

.shape 
 
{ 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t margin: 0 auto; 
 
\t background-color: #3F7296; 
 
\t position: relative; 
 
\t color: #FFF; 
 
\t line-height: 50px; 
 
\t font-size: 40px; 
 
} 
 
.b1, .b2 
 
{ 
 
\t position: absolute; 
 
\t left: 100px; 
 
\t bottom: 0px; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t border-style: solid; 
 
\t border-width: 0px 0px 50px 16px; 
 
\t border-color: transparent transparent transparent #3F7296; 
 
} 
 

 
.b2 
 
{ 
 
\t left: -16px; 
 
\t border-width: 50px 16px 0px 0px; 
 
\t border-color: transparent #3F7296 transparent transparent; 
 
}

<div class="shape"> 
 
\t <i class="b1"></i> 
 
\t <i class="b2"></i> 
 
</div>

Fiddle: http://jsfiddle.net/Ly1dz111/

Ảnh chụp màn hình từ Chrome:

Ảnh chụp màn hình từ Firefox (Mac OS X)

Làm cách nào để khắc phục điều này trong Firefox?

Answer 1

Đây là known bug in Firefox's handling of diagonal borders và giải pháp thay thế là đặt biến đổi tỷ lệ trên phần tử sao cho Firefox buộc phải chạy nó qua bước đồ họa bổ sung.

Trong ví dụ của bạn, giải pháp là đặt -moz-transform: scale(.9999) trên các yếu tố .b1 và .b2. Điều này buộc chống răng cưa trong Firefox.

.shape 
 
{ 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t margin: 0 auto; 
 
\t background-color: #3F7296; 
 
\t position: relative; 
 
\t color: #FFF; 
 
\t line-height: 50px; 
 
\t font-size: 40px; 
 
} 
 
.b1, .b2 
 
{ 
 
\t position: absolute; 
 
\t left: 100px; 
 
\t bottom: 0px; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t border-style: solid; 
 
\t border-width: 0px 0px 50px 16px; 
 
\t border-color: transparent transparent transparent #3F7296; 
 
\t -moz-transform: scale(.9999) 
 
} 
 

 
.b2 
 
{ 
 
\t left: -16px; 
 
\t border-width: 50px 16px 0px 0px; 
 
\t border-color: transparent #3F7296 transparent transparent; 
 
}

<div class="shape"> 
 
\t <i class="b1"></i> 
 
\t <i class="b2"></i> 
 
</div>