与CSS浏览器兼容的圆角导航栏

我正在使用DIV和圆角图像的圆角使用浏览器兼容的导航栏。我已经在FireFox中完美地工作了，只是发现IE对它进行了屠杀（当然）。与CSS浏览器兼容的圆角导航栏

我现在唯一的问题是让我的内容DIV（navBody）伸展以匹配侧面图像的高度。在这两种浏览器现在我有这样的：

http://img80.imageshack.us/img80/5088/40128898.jpg

<div class="navWrapper"> 
<div class="navLeft"></div> 
<div class="navBody"> 
    <a href="/members">Login/Register</a> 
</div> 
<div class="navRight"></div> 
</div> 

.navRight 
{ 
float: left; 
width: 12px; 
height: 25px; 
background: url('/images/nav/tabright_off.png'); 
} 

.navLeft 
{ 
float: left; 
width: 12px; 
height: 25px; 
margin-left: 3px; 
background: url('/images/nav/tableft_off.png'); 
} 

.navBody 
{ 
float: left; 
background: #DDDDEE; 
white-space: nowrap; 
font: bold 12px Verdana, sans-serif; 
padding-top: 5px; 
overflow: hidden; 
} 

.navWrapper 
{ 
float: left; 
height: 25px; 
display: inline; 
}

我尝试添加为5px填充，底部navBody，但在FF和IE不因盒模型问题，这只是工作。将navBody设置为固定高度（标签应该高20px）似乎什么都不做。有任何想法吗？

来源

2010-08-07 MarathonStudios

你能提供完整的代码/演示吗？ – 2010-08-07 17:56:00

我添加了相关的CSS代码 – MarathonStudios 2010-08-07 18:11:25

你真的需要在IE中舍入边框吗？如果没有，只需使用* border-radius规则。请记住，您的网站无需在每个浏览器中都保持一致。 – 2010-08-07 18:20:26

尝试添加

<br style="clear:both" />

到navBody div的底部，看看是否有帮助的事情。

来源

2010-08-07 17:57:42

试过了，它在任一浏览器中都没有什么不同。 – MarathonStudios 2010-08-07 18:11:45

不知道为什么在CSS中添加20px的高度不起作用（在navBody），这将是我的第一次猜测。你可以尝试使它height: 25px（以配合双方），但然后更改line-height推下你的文本（而不是padding-top）。

另一个选项（这将改变你的导航的实际设计）将是在所有导航项上设置一个width。通常渲染引擎倾向于在任何浮动元素上设置width。

来源

2010-08-07 18:26:44

身高：20px的作品，但只在FireFox。这个问题在IE中仍然存在 - 是我使用干扰IE中height：属性的其他CSS吗？ – MarathonStudios 2010-08-07 21:14:30

黑客，但你可以在IE中试试'_height：25px'，看看是否能解决它... – 2010-08-07 21:22:13

发现问题 - FireFox将padding-top（5px）添加到我设置的20px高度以获得总共25px; IE浏览器并不是如此高度停留在20px。通过默认情况下将高度设置为25px并通过裁剪包装div中的溢出来弥补Firefox的不足。

来源

2010-08-07 21:26:36 MarathonStudios

你也可以接受你自己的答案 – 2010-08-10 02:42:28

与CSS浏览器兼容的圆角导航栏

回答

相关问题