CSS 文本位置 IE/FF 问题答案

【问题标题】：CSS Text position IE/FF issueCSS 文本位置 IE/FF 问题
【发布时间】：2010-09-10 18:20:10
【问题描述】：

我有这个导航

<div class="cookieBar">
    <div class="light first">
        <a href="#" class="ckLnk">Home</a>
    </div>
    <div class="dark">
        <img src="images/cnavR1.png" class="pointE" /><a href="#9" class="ckLnk">Cars</a>
    </div>
    <div class="light">
        <img src="images/cnavR2.png" class="pointE" /><a href="#11" class="ckLnk">Ferrari</a>
    </div>
    <div class="dark">
        <img src="images/cnavR1.png" class="pointE" /><a href="#18" class="ckLnk">Broken Ones</a>
    </div>
    <div class="light">
        <img src="images/cnavR2.png" class="pointE" /><a href="#23" class="ckLnk">No Windows</a>
    </div>
    <img src="images/cnavR1.png" class="pointE" />
    <div style="clear:both">
    </div>
</div>

使用 CSS：

/* Cookie navigation trail */
.cookieBar
{
    background-color: #D8DFE3;
    height: 26px;
    width: 100%;
    margin-bottom: 12px;
}
.light
{
    background-color:#0F6B93;
    height: 26px;
    float:left;
}
.dark
{
    background-color:#0E3B52;
    height: 26px;
    float:left;
}
.first
{
    padding-left: 10px;
}
.ckLnk
{
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: none; 
}
.ckLnk:hover
{
    text-decoration: underline;
}
.pointE
{
    float:left;
    padding-right:10px;
}

我需要将锚链接的位置降低几个像素，使其在框内居中。当我做position:relative;top:5px;它在 FF 中运行良好，但在 IE 中却相差很多 px。我似乎无法让它在两种浏览器中都匹配！

有什么建议吗？ IE需要top:8px；并且 FF 需要是 top:4px；让它看起来正确。

【问题讨论】：

标签： css browser cross-browser stylesheet

【解决方案1】：

或者，要使链接居中对齐，您只需使用与导航栏高度相同大小的line-height。在这种情况下：

.ckLnk
{
  line-height: 26px; 
}

【讨论】：

【解决方案2】：

IE可以监听#标签为例：

#top:5px;  only works in IE,

所以尝试将 div 的高度降低 5px

#height:21px;

别忘了保留其他浏览器的旧高度：

#height:21px;
height:26px;

等等，我忘了！

如果使用 5px 减少对高度不起作用，请尝试使用 5px 增加它！

#height:31px;

【讨论】：

【解决方案3】：

使用条件注释能解决问题吗？

http://en.wikipedia.org/wiki/Conditional_Comments

【讨论】：

您应该始终尝试使用 CSS 来解决此类问题，然后再使用条件 cmets。事实上，几乎没有必要使用它们，这是好事。有条件的 cmets 很难维护，一旦你使用它，你就会开始越来越多地使用它。现在的大禁忌。

【解决方案4】：

首先，您应该尝试重置尽可能多的属性。有时，不同浏览器中的默认边距/填充/其他内容之间存在差异。

尝试加载reset.css，看看它是否仍然会出现同样的问题。这样您就可以开始缩小问题所在的范围。

【讨论】：

【解决方案5】：

我个人会将此 HTML 标记更改为无序列表并使用图像设置 LI 的样式。

在语义上会更正确，更容易控制。

标记类似：

<ul class="cookiebar">
<li class="first light"><a class="home" href="#">Home</a></li>
<!-- etc-->
</ul>

css

a.home { 
  background:url(cNavR1.png); 
  display:block; 
  width:100%; 
  height:100%; 
  text-indent:-999em;
}

等

【讨论】：

如果可以使用背景颜色，为什么还要使用图像？更容易控制，但每次你想要做出改变时，你都必须制作新的图像。不好的建议。
OP 在他的导航栏中有图片。可能是透明的png。您可以同时使用 BG 颜色和图像。