【发布时间】: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。