Firefox Box-shadow & Outline bug

Firefox同时使用outline和boxshadow时会出现outline被shadow撑开的bug,Chrome、Opera不存在此问题。

如以下代码:

<style type="text/css">
    #ffbug{
        margin:30px auto;
        width:200px;
        height:200px;
        border:2px solid blue;
        outline:5px dotted green;
        box-shadow: 0 0 10px red;
        -moz-box-shadow: 0 0 10px red;
        -webkit-box-shadow: 0 0 10px red;           
    }
</style>
<div id="ffbug">
    蓝色为border<br />
    绿色为outline<br />
    红色为box-shadow<br /><br />
    Firefox会将box-shadow的宽度计算进width中,从而导致border变化,于是outline偏移。
</div>


在Chrome中可正常显示

Chrome正常显示outline和box-shaodw

但在Firefox会发生异常

Firefox显示不正常

Demo页面(嗯,IE自重)

36条评论

    1. @dengmin, 对比两幅图没看出吗?(颜色对比看来不强烈

        1. @dengmin, 看那个绿色的outline,已经偏离了;而chrome是紧挨着的

      1. @流年, YES,我倒是觉得这个不算bug,不称开怎马看的到阴影啊。。

        1. @Mucid, 撑开会导致比较大的问题,比如在评论框那里想叠用两者的时候会很难看的,而且可能会撑破父级窗口的

    1. @静夜燃香, 原本想搭配使用的,结果这个问题弄得不知道咋好了

  1. bug?应该说是不同浏览器的标准不一样吧,可能FF就认为应该被撑开。。。
    就比如大家都说IE的什么什么bug,其实那只是IE不遵循W3C的标准罢了。。 😆

    1. @QiQiBoY, 嗯,很多情况都是由于见解不同所导致的;不过,在这里,我觉得shadow计算进宽度里不怎么好。要是FF依然坚持的话,想合起来使用就麻烦了,也不知道有没有hack

  2. 不会CSS 的人只能支持了。我一直想把评论框弄小,然后弄个广告框在旁边,都不懂如何处理

    1. @Leyond, 粗粗看了一下,修改起来应该不会很难

    1. @laowi, 在写《小打小闹的修改》一文时发现的,不过一直没有写而已

    1. @记忆之家, IE我要求不高,可以正常显示就可以了

  3. 就是外面的阴影感觉不对劲吗?这应该不是属于bug吧1好多效果在不同浏览器下显示的都不一样

    1. @学夫子, 这个Firefox处理的不一致,IE 9 不知道

    1. @睿智小超人, 也不是什么很高深的东西,只是跟在别人后面折腾而已

    1. @N, 其实我是想结合起来用到这里的

评论已关闭。