如何从额外的空间，摆脱对

我创建了简单的横向菜单，并给每个LI内享有平等的权利和左填充，但在IE版本中，它是最后李后留下多余的空间或灌进旁边的菜单右侧线。如何从额外的空间，摆脱对

我花3个小时，使其跨浏览器兼容，但失败而告终。当我把最后的LI上的额外填充调整空间时，它在Firefox中很好，但在ie中显示不需要的空间。我想让它跨浏览器兼容，而不使用黑客。

enter image description here

下面

是代码：

<section class="topContent"> 
    <nav> 
     <ul> 
      <li><a href="javascript:;">home</a> 
      </li> 
      <li><a href="javascript:;">earthmoving</a> 
      </li> 
      <li><a href="javascript:;">attachments</a> 
      </li> 
      <li><a href="javascript:;">power systems</a> 
      </li> 
      <li><a href="javascript:;">truck tailer</a> 
      </li> 
      <li><a href="javascript:;">ag equipment</a> 
      </li> 
     </ul> 
    </nav> 
    <!--/nav--> 
</section>

.topContent{ width:940px; margin:0 auto;} 
.topContent nav{ background:#ffce12; height:42px;} 
.topContent nav ul{ padding:0; margin:0;} 
.topContent nav li{ float:left; list-style:none;} 
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;} 
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}

来源

2012-11-04 Praveen

您有几个代码的问题。首先通过W3C验证程序运行它，更正它们，然后再回来。 – j08691

使用浏览器调试工具，即：萤火虫在Firefox和其他浏览器相似（通常F12默认键），你可以在元素上点击并研究它的风格和它的CSS的一部分做了什么。这通常可以帮助您快速确定为何您拥有不需要空间的空间，或者需要更改哪些空间以在需要的地方添加空间。调试器工具甚至可以直接更改样式以检查即时结果。 – Nope

相信这是一个字母间距问题，因为不同的浏览器呈现不同的字母间距，即使我已经玩过字母间距，但它的功能工作 – Praveen

你的“设计公司” CSS不出来的物品对齐/空间可言，你刚刚调整的填充值，使它在一个浏览器上工作。

一个解决这个问题的办法是to justify the nav items，或者如果你不感兴趣的动态内容（即资产净值项冠军不会很长一段时间而改变），你可以只设置elemenent宽度明确和中心自己的文字。

来源

2012-11-04 22:55:17

的问题是基于菜单的宽度。我相信，因为文本在每个浏览器和操作系统中都略有不同，所以您不会得到完美的结果。如果菜单不是动态的，你可以尝试分别调整宽度/填充。或者，您可以将菜单宽度的宽度除以链接的数量。如果某些项目太长，可能会显得有点奇怪。如果你这样做，确保你对齐中心的文字。

nav a { 
    padding: 0; /*just need to remove the padding*/ 
    width: 156.6px; /*940/7 (the amount of links)*/ 
    text-align:center; 
}

来源

2012-11-04 23:13:26 lukek

如何从额外的空间，摆脱对

回答

相关问题