很难发现此页面的布局在 IE 和 Firefox 中都是错误的，而且代码完全(据我所知)是中性的。
在 IE 中，包含 next 的框对于它来说太大了。
在 Mozilla 中它太小了。
当我使用该属性时，Mozilla 显示框阴影:
box-shadow
这很奇怪，我还以为是用了-moz-box-shadow
这是正在发生的事情:http://i.imgur.com/SvPAP.png (Mozilla 盒子上的那一行来自 photoshop)。
这是所有相关代码:
HTML:
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
<link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />
<head>
<body>
<div class="divCentre">
<div class="divTitleCon">
<p class="titleText">What Is This?</p>
</div>
<div class="divContentCon">
<p class="contentText">
TEXT
<br /><br />
TEXT
<br /><br />
TEXT
<br /><br />
<span class="footerText">
TEXT
</span>
</p>
</div>
</div>
</body>
</html>
CSS 页面:
html, body
{
margin: 0;
padding: 0;
}
body
{
background-color: rgb(241, 250, 253);
}
.divCentre
{
position:absolute;
top: -25%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 380px;
height: 230px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(200, 200, 200, 1); /* BORDER */
background-color: rgba(255, 255, 255, 1); /* BACKGROUND */
color: rgb(100, 100, 100);
-moz-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
-webkit-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
}
.divTitleCon
{
position: relative;
width: 100%;
height: 15%;
}
.divContentCon
{
position: relative;
margin-top: 20px;
width: 100%;
height: auto;
max-height: 80%;
word-wrap: break-word;
overflow: hidden;
}
CSS 文本:
p
{
margin: 0;
padding: 0;
}
.titleText
{
font: 32px Arvo;
text-shadow: 0px 1px rgb(255,255,255);
}
.contentText
{
font: 14px PT Sans;
color: rgb(150, 150, 150);
text-shadow: 0px 1px rgb(255,255,255);
}
.footerText
{
color: rgb(200, 200, 200);
}
最佳答案
Mozzila 和 Chrome 呈现文本的方式似乎完全不同(这里有问题的文本来自 Google 的字体 API，也许更本地化的版本不会有这个问题。我会试验一下)。
无论如何，指定行高和使用通用字体很重要。
仅指定 line-height将修复行之间的间隙，间隔为 <br /><br /> ，但是，该行的文本量会有所不同。
Firefox 倾向于将其压缩得更多，而 Google 则“正确”地呈现它，这是可以理解的。来自 Google API 的字体可能针对 -webkit- 或其分支进行了优化。
无论哪种方式，这都很烦人，但却是一个必需的解决方法。
长话短说:
通过更改修复:
font: 14px PT Sans;
到
font: 14px Arial, Sans-Serif;
line-height: 14px;
关于html - Mozilla 布局和阴影不工作 CSS/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13779633/