Simulating text-stroke in Internet Explorer

后端 未结 2 409
谎友^
谎友^ 2020-12-11 23:58

All browsers, with the exception of Internet Explorer (even the IE9 beta, apparently) support text-shadow, and additionally, webkit browsers seem to understand

相关标签:
2条回答
  • 2020-12-12 00:28

    There's this here that I dug up from a while back: http://jsfiddle.net/kovalchik/yJff9/

    I can't test if it actually works or not though since I'm using a mac at the moment. It looks like a bit of a dirty hack as well. But it might be worth a try :P

    0 讨论(0)
  • 2020-12-12 00:34

    I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.

    This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.

    IE Filters

    The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.

    David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.

    I then combined some of the elements suggested on useragentman with the dropshadow filters.

    Putting it together

    This example would be black text with a white stroke. I'm using conditional html classes by the way to target IE.

    #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 讨论(0)
提交回复
热议问题