【问题标题】:CSS - Mozilla bug? box-shadow:inset not working properlyCSS - Mozilla 错误? box-shadow:inset 无法正常工作
【发布时间】:2011-10-13 14:28:12
【问题描述】:

基本上,下面的代码应该只是一个边缘有阴影的白页。这在 Chrome 中运行良好,但我似乎无法在 Firefox 中运行!

<html>
<head>
<style type=text/css>
body {
background:#ffffff;
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow:inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
</style>
</head>
<body>
</body>
</html>

在此处查看页面:

http://pastehtml.com/view/bagevr6ke.html

在 Chrome 和 Firefox 中查看它,如果您发现不同之处,请告诉我:)

干杯

编辑:所以下面的帖子解释了如何修复上面的代码,一个 CSS 重置工作,我还了解了 quirk 模式和 doctypes :)

但是,无论我使用什么重置,我正在处理的 CSS 页面仍然存在这个错误。我目前没有使用 Doctype,因为我不确定我应该放什么,或者它是否会修复错误。

这是完整的网站:

http://middle.dyndns-server.com/results.html

还有样式表:

body {
background:url('bg.png');
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow: inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}

#footer {
padding-bottom:10px;
margin-top:30px;
}

#page {
width:960px;
height:auto;

background-color:#ffffff;
#background:url('bg2.png');

/*Space*/
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
margin-top:-10px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;

/*Shadow*/
-moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
-webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;

/*Border Radius*/
border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-o-border-radius:0px 0px 20px 20px;

}

input[type=text] {
background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666));
        background: -moz-linear-gradient(top, #333333, #666666);
        filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666'); 

border-width:1px;
border-style:solid;
border-color:#777777;
color:ffffff;
}

.line1 { 
float:left;
align:center; 
padding-bottom:0px;
}

hr { 
clear:left;
color:#111111;
}

/* The *normal* state styling */
.btn{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')";
    background-color:rgb(51, 51, 51);
    border:1px solid rgb(0, 0, 0);
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px 10px;
box-shadow:0px 0px 6px rgb(130, 130, 130);
    -moz-box-shadow:0px 0px 6px rgb(130, 130, 130);
    -webkit-box-shadow:0px 0px 6px rgb(130, 130, 130);
    font-size:12px;
    font-weight:normal;
    color:rgb(255, 255, 255);
    text-shadow:0px 0px 1px rgb(255, 255, 255);
}
/* The *hover* state styling */
.btn:hover{
    background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    box-shadow:0px 0px 6px rgb(0, 0, 0);
    -moz-box-shadow:0px 0px 6px rgb(0, 0, 0);
    -webkit-box-shadow:0px 0px 6px rgb(0, 0, 0);
}

/* The *active* state styling */
.btn:active,.btn:focus{
    background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
}

a {
font-family:arial;
outline:none;
text-decoration:none;
color:333333;
}

a:link {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:active {
text-decoration:none;
color:ffffff;
}

a:hover {
text-decoration:none;
}

我确信这不是很好,但我正在学习,这个问题是我现在的主要关注点:)

非常感谢。

【问题讨论】:

  • 分享您网页的完整 HTML。

标签: css firefox shadow


【解决方案1】:

添加这个:

html, body {
    height: 100%
}

http://jsbin.com/oyuzug

body里面什么都没有,所以没有高度。

它在 Chrome 中没有此功能的唯一原因是您没有将 doctype 作为启用标准模式的第一行。

在 Chrome 中测试这些:

您的原始代码:http://jsbin.com/urimah

您的原始代码与 doctype:http://jsbin.com/urimah/2

结论:始终将 doctype 作为第一行,以避免 Quirks Mode 及其在不同浏览器之间带来的不一致。

【讨论】:

  • 这确实适用于我给出的示例,但仍然不能解决我的主要问题(它要复杂得多)。我认为使用重置将是如何解决 xD 非常感谢
  • 不客气。除非您解释清楚,否则我无法帮助您解决“主要问题”。
  • 我已经更新了“OP”,不确定你在 StackOverflow 上如何称呼它们(我非常喜欢它!)。再次感谢!
  • 到目前为止的一条评论:oncontextmenu="return false" 是有史以来最烦人的事情。
  • 啊,对不起,它来自另一个项目,刚刚被模板化...
【解决方案2】:

Firefox 向您展示了正确的东西,因为现在 body 没有 height。所以你必须定义你的bodyheight

在你的 CSS 中写下这个:

html, body {
    height: 100%
}

【讨论】:

    【解决方案3】:

    所以标记为正确的答案CSS - Mozilla bug? box-shadow:inset not working properly 对我不起作用。为什么?因为该示例不包含任何内容。当您使用 height: 100% 设置 &lt;body&gt;&lt;html&gt; 元素的样式时,它会产生一个奇怪的错误,即 100% 在技术上注册为 100% 的视口而不是 100% 的窗口高度

    这是如何正确执行此操作的一个很好的示例:http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html。在height: 100% 处设置bodyhtml 元素的样式是正确的,但是,您的内阴影需要附加到另一个元素(不能是bodyhtml),然后也是min-height: 100%box-shadow: 0 0 100px #000 附加到垫片,例如

    html, body { height: 100% }
    #styled-div { 
       min-height: 100%;
       box-shadow: 0 0 100px #000;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-26
      • 2012-12-16
      • 2018-02-21
      • 2018-11-28
      • 1970-01-01
      相关资源
      最近更新 更多