2012-03-31 44 views
5

Tôi đang xây dựng một trang web và tôi đang sử dụng chức năng đổ bóng văn bản, tuy nhiên nó không hoạt động cho IE.Bóng văn bản cho IE

đồ họa:

2

text-shadow: 0.1em 0.1em 0.2em black; 

Có giải pháp nào hay hack để hơn đến điều này, hoặc cái gì đó bắt chước chức năng text-shadow cho IE.

Trả lời

2

tôi đang tìm kiếm một giải pháp văn bản đột quỵ qua trình duyệt mà làm việc khi chồng trên hình ảnh nền. nghĩ rằng tôi có một giải pháp cho điều này mà không liên quan đến đánh dấu thêm, js và các công trình trong IE7-9 (tôi đã không được thử nghiệm 6), và không gây ra vấn đề răng cưa.

Đây là sự kết hợp của việc sử dụng bóng văn bản CSS3, which has good support except IE, sau đó sử dụng kết hợp bộ lọc cho IE. CSS3 hỗ trợ văn bản đột quỵ là người nghèo vào lúc này.

lọc IE:

Ánh lọc looks terrible, vì vậy tôi đã không sử dụng đó.

David Hewitt's answer liên quan đến việc thêm bộ lọc dropshadow theo kết hợp chỉ đường. Sau đó, ClearType sẽ bị xóa do đó chúng tôi kết thúc với văn bản được đánh dấu sai.

Sau đó, tôi kết hợp một số thành phần được đề xuất trên useragentman với các bộ lọc đổ xuống.

Đưa nó cùng

Ví dụ này sẽ là văn bản màu đen với một cơn đột quỵ trắng. Tôi đang sử dụng các lớp HTML có điều kiện bằng cách nhắm mục tiêu đến IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement { 
    color: #000000; 
    text-shadow: 
    -1px -1px 0 #ffffff, 
    1px -1px 0 #ffffff, 
    -1px 1px 0 #ffffff, 
    1px 1px 0 #ffffff; 
} 

html.ie7 #myelement, 
html.ie8 #myelement, 
html.ie9 #myelement { 
    background-color: white; 
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1); 
    zoom: 1; 
} 
+0

Nice, mặc dù bạn có thể sử dụng Glow với Chroma và có vẻ không quá tệ - [xem câu trả lời của tôi cho một câu hỏi tương tự] (http://stackoverflow.com/a/13925485/568458). Có thể tốt hơn 4 bóng. Vai trò của 'XImageTransform.Microsoft.Alpha (opacity = 100)' ở đây là gì? – user568458

+0

Xin chào, hãy xem liên kết useragentman ở trên, nó giải thích thêm một chút về các bộ lọc của IE. Bộ lọc IE không phải là điểm mạnh của tôi vì vậy nó đã có một số chơi xung quanh với họ, nhưng các công trình trên cho tôi trên các phiên bản IE. Nếu các bộ lọc có thể được cải thiện, nó sẽ là tuyệt vời để nghe lại. Chúc mừng – crdunst

0

Lớp bộ lọc IE cũng đặt bóng trên bất kỳ hình nền nào bạn có. Ví dụ, tôi có một thẻ H1 có một dòng như là một phần của nền, khi tôi đặt bộ lọc bóng văn bản IE trên, dòng trong nền thừa kế bóng đó.

0

Tôi cũng đang tìm kiếm và điều tra vấn đề này một thời gian và muốn chia sẻ một kết quả có thể mâu thuẫn trong khi kiểm tra trang web của tôi trên IE10.

Tôi có cấu trúc này html:

<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p> 

kết hợp với CSS:

p { display: inline-table; 
    color: #FFF; 
    text-shadow: 0px 1px 2px #111, 0px 1px 0px #111; 
    margin: 0px 20px; } 

a.links { 
    text-decoration: underline; 
    color: #FFFF60; 
    font-size: 1.1em; } 

Nếu tôi nhìn vào kết quả của điều này trong IE10, các văn bản Achor "ledenpagina" không nhận được sự giáo khoa kiểu dáng bóng như được định nghĩa trong thẻ cha (thẻ p). Giả thiết rằng điều này có thể liên quan đến văn bản trang trí: chọn lọc gạch dưới là sai (được thử nghiệm bằng cách áp dụng trang trí văn bản cũng trên thẻ p)

Kết quả có thể được xem tại đây: http://tczelem.be (trượt thanh trượt tiêu đề) tab)

Vì vậy, bộ chọn trang trí văn bản dường như có một số hiệu ứng trong IE10.

! [Nhập mô tả hình ảnh ở đây] [2]

+0

Đây không phải là câu trả lời. Bạn nên đăng nó như một câu hỏi nếu muốn được giúp đỡ. – Zanon

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