是否有合理的方法来控制所有浏览器的字体间距,以便文本按预期排列,而不是绝对定位?从我正在处理的项目中获取以下示例:
第一个是Firefox 3.5,第二个是IE 8,第三个是IE 6.显示的表单包含在一个绝对定位的div中,并使用ol / li元素进行布局。我在每个列表元素上有一个5px的下边距以提供间距,但除此之外,所有内容都是内联呈现的。我知道每个浏览器都会以不同的方式呈现字体,这就是占据间距蠕变的原因,但是当它试图在一个固定的区域内放置东西时,它可能会变成一种相当大的形象(这种特殊的形式让我很难得)模态对话框)。
答案 0 :(得分:3)
实施reset
CSS样式表,然后自己明确设置所有样式。
这将消除不同浏览器必须应用稍微不同的默认值的趋势。例如,一个浏览器将在项目符号列表项上使用padding-left,另一个将使用margin-left。 (我忘了哪一个做了什么。这就是为什么我总是使用重置!)如果你先重置一切,你可以自己决定字体大小,行高,边距等,并让它们相当一致在各种浏览器中。
开始的好地方是雅虎的reset.css
here或尝试另一个here。谷歌搜索“重置CSS”将引导您进行大量关于此方法的讨论,优点和缺点。
答案 1 :(得分:1)
在您的主CSS文件的顶部包含这样的内容,或将其包含在自己的CSS文件中:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,
td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
这将清除所有基于浏览器的样式,使您的CSS样式在所有浏览器中显得相同。
答案 2 :(得分:0)
另一个选项是为每个父元素添加一个高度声明。这样,只要您取得三个中最高的文本并将其设置为默认高度,所包含文本的高度就无关紧要。