CSS文本位置IE/FF问题

我有这样的导航CSS文本位置IE/FF问题

<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需要顶部：8px;和FF需要顶部：4px;因为它看起来是正确的。

来源

2010-09-10 Tom Gullen

或者，对准中央的链接，您可以只使用一个line-height相同的尺寸作为导航栏的高度。在这种情况下：

.ckLnk 
{ 
    line-height: 26px; 
}

来源

2010-09-10 10:20:10

超级！我<3岁。 – 2010-09-10 10:22:28

IE可以听＃标签为例：

#top:5px; only works in IE,

所以尝试div的高度与5px的

#height:21px;

不要减少忘记保留旧高度为其他浏览器：

#height:21px; 
height:26px;

等我忘了！

如果有5px的不工作@高度decreating，尝试用5px的increating吧！

#height:31px;

来源

2010-09-10 10:13:55 Jordy

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

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

来源

2010-09-10 10:15:53 Saiyan

您应该试图在求助于条件注释之前尝试并使用CSS来修复这些问题。事实上，几乎没有必要使用它们，这是为了好。有条件的评论是保持屁股的一种痛苦，一旦你使用了一个，你会开始越来越多地使用它。现在是大否。 – 2010-09-10 10:18:15

所有你应该尝试重置尽可能多的属性，你可以第一。有时候，不同浏览器中的默认边距/填充/不管是什么差别。

尝试加载reset.css，看看它是否仍然给出了同样的问题。这样你就可以开始缩小问题所在。

来源

2010-09-10 10:16:11

就我个人而言，我会将此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; 
}

等

来源

2010-09-10 10:17:49 Ross

如果你可以使用背景颜色，你为什么要使用图像？更容易控制，但每次你想改变时，你都必须制作新的图像。不好的建议。 – 2010-09-10 10:20:52

OP在他的导航栏中有图像。可能是透明的PNG。您可以同时使用BG颜色和图像。 – Ross 2010-09-10 10:23:49

CSS文本位置IE/FF问题

回答

相关问题