Cách khắc phục kết xuất đồ thị bán kính của IE kết hợp với hộp bóng?

Có ai có ý tưởng về cách "sửa" hiển thị trong IE 9 và 10 của sự kết hợp giữa hộp đổ bóng và bán kính đường viền không?Cách khắc phục kết xuất đồ thị bán kính của IE kết hợp với hộp bóng?

Điều này đặc biệt đáng chú ý khi sử dụng bóng tối nội bộ. Bán kính của bóng rất khác trong IE so với webkit/gecko ...

Trong hình ảnh này, bạn có thể thấy sự cố. Ở bên trái là một nút có bóng hình hộp, ở bên phải mà không có hộp bóng. (Không nhớ khác nhau font-vẽ)

enter image description here

Dưới đây là các mã được sử dụng: http://dabblet.com/gist/5450815

Nguồn

2013-04-24 ThomasM

Câu hỏi hay. Duyệt qua [thông số W3] (http://www.w3.org/TR/css3-background/#the-border-radius), tôi không chắc chắn tác nhân người dùng nào có quyền (hoặc nếu hành vi này được xác định). Tôi không thể tìm thấy bất kỳ chi tiết cụ thể nào từ WHATWG (thường đi sâu vào việc triển khai trình duyệt). Có vẻ như bán kính bên trong của bóng hộp có bán kính * bên ngoài * của đường viền, vì vậy một cái gì đó giống như [this] (http://jsfiddle.net/JMVgd/3/) thực sự khớp đúng. Tuy nhiên, khi không có biên giới, suy luận của một chiều rộng bên ngoài dẫn đến kết quả không mong muốn mà bạn đang thấy. Tôi không thể tìm được cách giải quyết. –

Chrome, Firefox và Opera đều giải thích chính xác chiều rộng trình duyệt được chèn vào là tương đối so với không gian được hiển thị trên phần tử bên trong của phần tử. Trong khi IE không bao giờ làm phiền sự khác biệt giữa không gian nội thất và ngoại thất và luôn sử dụng độ cong của biên giới bên ngoài. Kiểm tra nó ra ở đây: http://dabblet.com/gist/5503928 Bóng inset hộp của IE phù hợp với độ cong hoàn hảo của một biên giới bên ngoài 10px. Phần còn lại không đơn giản đảo ngược kiểu đường viền, chúng tính toán lại nó dựa trên các giới hạn của phần tử. Việc thực hiện của IE là sai, và có vẻ lười biếng nếu chúng ta trung thực. –

Vấn đề chỉ xảy ra khi sự lây lan của bóng inset gây nên một "bóng-radius" lớn hơn kích thước của bán kính đường viền trong IE. Đặt bán kính đường viền thành 50px trong ví dụ của bạn và trông giống như trong IE và Chrome.

Nếu bạn cần trải rộng hộp bóng lớn hơn thì bạn chỉ có thể sử dụng đường viền thay thế, ít nhất là trong các ví dụ của bạn sẽ thực hiện thủ thuật. Ví dụ: http://dabblet.com/gist/5501799

Một vấn đề khác bạn có thể thấy là IE và Chrome làm cho mờ của hộp bóng hoàn toàn khác nhau, nhưng tôi giả sử bạn không sử dụng nó trong ví dụ của bạn vì lý do đó ...

Nguồn

2013-05-02 12:10:01 Willem

không lý tưởng, nhưng giải pháp tốt nhất tôi đoán. Vấn đề là biên giới phải animate khi di chuột, do đó, nút sẽ nhảy một chút:/ – ThomasM

Tôi vừa thử làm động một đường viền và đệm cùng một lúc: dường như thực sự lộng lẫy: http://jsfiddle.net/w1ll3m/TkpQm/. Có thể 'box-sizing: border-box;' có thể giúp bạn bằng cách nào đó bằng cách sửa toàn bộ chiều rộng của nút. – Willem

-4

Hãy thử điều này: // CSS

.box { 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 

    -moz-box-shadow: inset 0 0 10px #000; 
    -webkit-box-shadow: inset 0 0 10px #000; 
    box-shadow: inset 0 0 10px #000; 

    width: 200px; 
    height: 100px; 
}

Đối với IE8, bạn phải bao gồm Tệp CSS3 pie (pie.htc) sau đó nó sẽ hoạt động trên IE8.

Bạn có thể tải về từ đây: http://css3pie.com/

Nguồn

2013-04-24 10:29:06

vấn đề không phải là nó không hiển thị. Nó chỉ không hiển thị chính xác. – ThomasM

Bạn đã thêm CSS ở trên chưa? Nó sẽ hoạt động thêm CSS dưới đây .box { \t border: 5px solid # 000; \t bán kính đường viền: 15px; \t -moz-border-radius: 15px; -webkit-border-radius: 15px; bestml-border-radius: 15px; \t -moz-box-shadow: inset 0 0 10px # 000; \t -webkit-box-shadow: chèn 0 0 10px # 000; \t hộp đổ bóng: chèn 0 0 10px # 000; \t chiều rộng: 200px; \t chiều cao: 100px; } http://jsfiddle.net/WcLKr/ –

như tôi đã nói, đó không phải là vấn đề. Chú ý số 0 thừa trong câu lệnh: inset 0 0 0 10px # 000. Bây giờ thử nghiệm trong IE8 trên IE9, nó cho một kết xuất xấu xí so với webkit/gecko. – ThomasM

Một cách nhanh chóng (bán bẩn) giải pháp, mà tôi đã cố gắng và làm việc, là một div bên trong một div. Hãy cho tôi biết nếu điều này làm điều đó.

HTML Mã sản phẩm:

</head> 
<body> 
<div class="box"><div class="box-inside"></div></div> 
</body> 
</html>

CSS Mã sản phẩm:

.box { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #000; 
width: 200px; 
height: 100px; 
background: #000; 
} 
.box-inside { 
border-radius: 15px; 
box-shadow: inset 0 0 0 10px #fff; 
width: 175px; 
height: 75px; 
position: relative; 
top: 12%; 
left: 6%; 
background: #fff; 
}

My jsfiddle

Nguồn

2013-04-29 18:56:06 Cam

tìm kiếm giải pháp thiết thực hơn ... cảm ơn! – ThomasM

Tôi đã thực hiện một vài nỗ lực với mã của bạn, nhưng nó dường như là một vấn đề về IE, tôi sẽ kiểm tra webkit để xem liệu nó có cung cấp một giải pháp hay không. http://css-tricks.com/almanac/properties/b/border-radius/ – Cam

Hãy thử điều này, thêm vai trò này:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');

Nguồn

2013-05-02 20:46:10 Rob1n

Bạn có thể yên tâm sử dụng inset hộp bóng bắt chước biên giới trong các trình duyệt hiện đại, nhưng IE mis-ám chỉ rằng bán kính. Bạn có thể giải quyết vấn đề này bằng cách cho phép IE rơi trở lại kiểu "outset" mặc định.

.Button { 
    color: #0ac; 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 2px #0ac; 
} 

/* IE media query hack */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    .Button { 
    box-shadow: 0 0 0 2px #0ac; 
    } 
}

Nguồn

2017-12-05 01:20:34

Cách khắc phục kết xuất đồ thị bán kính của IE kết hợp với hộp bóng?

Trả lời

Các vấn đề liên quan