【问题标题】:CSS Firefox box-shadow and outlineCSS Firefox 框阴影和轮廓
【发布时间】:2013-03-12 20:07:01
【问题描述】:

我已经在我的 CSS 代码中的 div 中添加了轮廓和框阴影。
该 div 在 Chrome 和 IE 上看起来很棒,但在 Firefox 中却不行:
铬和 IE: http://i.phirune.com/csrjfyqoczob

火狐: http://i.phirune.com/4gsrrub3ww6e

CSS代码如下:

#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}

我不知道如何解决这个问题,任何见解将不胜感激。

【问题讨论】:

    标签: css firefox


    【解决方案1】:

    为什么不使用多个盒子阴影?只需用逗号分隔你的盒子阴影。

    box-shadow:
        0px 0px 0px 1px #fff,
        0px 0px 0px 2px #606054,
        0px -1px 9px 1px rgba(119, 119, 119, 0.4);
    

    你可以随心所欲地添加。

    【讨论】:

    • 我试过了,没用。更糟糕的是,我不知道为什么添加阴影会修复这样的错误??
    • 天哪。你的意思是用阴影完全替换轮廓?确实很棒!
    • 盒子阴影只能出现在元素下方,而轮廓出现在顶部,这通常是所需的行为。
    • @aaaidan - 这不是真的。请注意,他向盒子阴影传递了 4 个参数。第 4 个是“扩展”值(可选)。这会将盒子阴影扩展到元素之外。如果您指的是页面上的其他项目,那么您还可以添加相对于元素的位置,使其阴影位于相邻 HTML 元素的顶部。
    • 是的,我熟悉非常方便的“扩展”值。已经有一段时间了,但我想我的意思是阴影不能出现在元素本身(或其子元素)之上。当您使用轮廓时,它总是显示为覆盖。如果您希望轮廓位于元素的边界内,这会很有用,看起来更整洁。
    【解决方案2】:

    这是一个 Firefox 错误。你只能绕过它。票还在直播中,您可以在:https://bugzilla.mozilla.org/show_bug.cgi?id=480888

    【讨论】:

    • 我刚刚在编写 HTML5 计算器时发现了这个错误。我想用outline 来表示键盘焦点,用方框阴影来表示鼠标悬停,但在FF 中失败了。
    【解决方案3】:
    -moz-box-shadow: 1px 1px 10px #00f;
    -webkit-box-shadow: 1px 1px 10px #00f;
    box-shadow: 1px 1px 10px #00f;
    

    您尝试支持哪些浏览器版本?现代浏览器支持 css3,你不需要做 css hack。

    这里有一些用于阴影的 css3 文档:http://www.css3.info/preview/box-shadow/

    【讨论】:

    • 我只是希望支持现代浏览器。
    • 然后我会查看 css3 文档
    • 我遇到了完全相同的问题...@PhiRune,你能解释一下解决了什么问题吗?顺便说一句,您应该将此问题标记为已回答:)
    猜你喜欢
    • 2013-03-12
    • 1970-01-01
    • 2011-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多