Firefox Box-shadow & Outline bug

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

如以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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自重)

Firefox Box-shadow & Outline bug》上有36条评论

    1. 流年 文章作者

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

      回复
        1. 流年 文章作者

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

          回复
        1. 流年 文章作者

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

          回复
    1. 流年 文章作者

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

      回复
  1. QiQiBoY

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

    回复
    1. 流年 文章作者

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

      回复
  2. Leyond

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

    回复
    1. 流年 文章作者

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

      回复
    1. 流年 文章作者

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

      回复
  3. 学夫子

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

    回复
    1. 流年 文章作者

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

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注