CSS - Mozilla的错误？盒阴影：插入不正常工作 [英] CSS - Mozilla bug? box-shadow:inset not working properly

问题描述

基本上下面的代码应该只是一个带有边缘阴影的白色页面。这在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> 
  

在这里查看网页：

< a href =http://pastehtml.com/view/bagevr6ke.html =nofollow> http://pastehtml.com/view/bagevr6ke.html

在Chrome和Firefox中查看，并告诉我是否看到不同之处：）
$ b $干杯

编辑：所以下面的帖子解释了如何修复上面的代码，一个CSS重置工作，也学习了怪癖模式和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'）; 
 
 / *空格* / 
 padding-top：0px; 
 padding-bottom：0px; 
 padding-left：0px; 
 padding-right：0px; 
 margin-top：-10px; 
 margin-bottom：0px; 
 margin-left：auto; 
 margin-right：auto; 
 
 / *阴影* / 
 -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：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; 
 
 
 $ b input [type = text] {
 background：-webkit-gradient（线性，左上角，右下角，从（＃333333）到（＃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; 
颜色：＃111111; 
 
 $ b $ * * normal *状态样式* / 
 .btn {
 background-image：linear-gradient（90deg，rgba（51，51， 51,0.8），rgba（0,0,0,0.2））; 
 background-image：-webkit-gradient（线性，0％底部，0％顶部，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）; 
 $ b $ * hover *状态样式* / 
 .btn：hover {
 background-image：线性渐变（-90deg，rgba（51,51,51 ，0.8），rgba（0,0,0,0.2））; 
 background-image：-webkit-gradient（线性，左上方，左下方，颜色停止（0％，rgba（51,51,51,0.8）），颜色停止（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）; 
 
 $ b $ * * active *状态样式* / 
 .btn：active，.btn：focus {
 background-image：线性渐变（90deg ，rgba（51,51,51,0.8），rgba（0,0,0,0.2））; 
 background-image：-webkit-gradient（线性，0％底部，0％顶部，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; 
概述：无; 
 text-decoration：none; 
颜色：333333; 
} 
 
 a：link {
 text-decoration：none; 
} 
 
 a：visited {
 text-decoration：none; 
} 
 
 a：active {
 text-decoration：none; 
 color：ffffff; 
} 
 
 a：hover {
 text-decoration：none; 
 
 
 
 
 
 $ b 
我相信它不是很好，但我正在学习，这个问题是我的目前主要关注的是：）
 
 
非常感谢。
解决方案
添加： 
 
 
  html，body {$ b $ height：100％
} 
  code> 
  http：// jsbin。 com / oyuzug  
 
 $ b   body 中没有任何内容，所以它没有高度。
 
 
 
在Chrome中没有这个工作的唯一原因是因为您没有将doctype作为启用标准模式的第一行。
 
 
 
 在Chrome中测试这些内容：您的原始代码 http://jsbin.com/urimah  
 
 
 
您的doctype原始代码： http://jsbin.com/urimah/2  
 
 $ b 结论：总是包含一个doctype作为避免怪癖模式的第一行以及它在不同浏览器之间带来的不一致之处。
 
Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can't seem to get it to work in 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>
View the page here:

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

Look at it in Chrome then Firefox, and tell me if you see a difference : )

Cheers

EDIT: So the post below explained how to fix the above code, a CSS reset worked and also i learned about quirk mode and doctypes  :)

However the CSS page i am working on is still suffering from this bug no matter what reset i use. I am not currently using a Doctype as i am not sure what i should put, or whether it would fix the bug. 

Here is the complete site:

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

And the stylesheet:
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;
}
I am sure its not all great but i am learning and this issue is my main focus right now : )

Thanks a lot.
解决方案
Add this:
html, body {
    height: 100%
}
http://jsbin.com/oyuzug

There is nothing in body, so it has no height.

The only reason it worked without this in Chrome is because you did not include a doctype as the very first line to enable Standards Mode.

Test these in Chrome:

Your original code: http://jsbin.com/urimah

Your original code with doctype: http://jsbin.com/urimah/2

Conclusion: Always include a doctype as the very first line to avoid Quirks Mode and the inconsistencies it brings between different browsers.

                        
这篇关于CSS  -  Mozilla的错误？盒阴影：插入不正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！