当前位置： 文江博客话题详情

CSS - Mozilla 错误？ box-shadow：插入无法正常工作

发布于 2024-12-09 19:27:20 字数 4508 浏览 1 评论 0原文

基本上，下面的代码应该只是一个边缘有阴影的白页。这在 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 重置有效，而且我还了解了怪异模式和文档类型:)

但是无论我使用什么重置，我正在处理的 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;
}

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

非常感谢。

原文

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

婴鹅 2024-12-16 19:27:20

添加以下内容：

html, body {
    height: 100%
}

http://jsbin.com/oyuzug

body 中没有任何内容，所以它没有高度。

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

在 Chrome 中测试这些：

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

带文档类型的原始代码： http://jsbin.com/urimah/2

结论：始终包含文档类型作为避免 Quirks 模式以及它在不同浏览器之间带来的不一致。

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.

回复 原文
薄荷梦 2024-12-16 19:27:20

Firefox 向您展示了正确的内容，因为现在 body 没有 height。所以你必须定义你的body的height。

在你的 CSS 中写下：

html, body {
    height: 100%
}

Firefox shows you the right thing because right now body has no height. So you have to define the height of your body.

Write this in your CSS:

html, body {
    height: 100%
}
回复 原文
知你几分 2024-12-16 19:27:20

因此，答案标记为正确 CSS - Mozilla bug？ box-shadow:inset 无法正常工作 对我不起作用。为什么？因为该示例不包含任何内容。当您使用 height: 100% 设置 和 元素的样式时，它会产生一个奇怪的错误，其中 100% 是从技术上讲，注册为视口的 100%，而不是窗口高度的 100%。

这是如何正确执行此操作的一个很好的示例：http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html。将 body 和 html 元素设置为 height: 100% 的样式是正确的，但是，您的内阴影需要附加到另一个元素（可以不是 body 或 html)，然后是 min-height: 100% 以及 box-shadow: 0 0 100px #附加000到垫片，例如

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

So the answer marked as correct CSS - Mozilla bug? box-shadow:inset not working properly does not work for me. Why? Because the example includes no content. When you style the <body> and <html> elements with height: 100% it creates a strange bug where the 100% is technically registering as 100% of the viewport rather than 100% of the window height.

This is a great example of how to do this properly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Styling the body and html elements at height: 100% is correct, however, your inner-shadow needs to be attached to another element (can't be body or html) and then min-height: 100% as well as box-shadow: 0 0 100px #000 attached to the shim, e.g.

html, body { height: 100% }
#styled-div { 
   min-height: 100%;
   box-shadow: 0 0 100px #000;
}
回复 原文
~没有更多了~

关于作者

苏别ゝ

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘世孤行

文章 0 评论 0

烟─花易冷

文章 0 评论 0

你是年少的欢喜

文章 0 评论 0

倒带

文章 0 评论 0

忱杏

文章 0 评论 0

送君千里

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文