與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瀏覽器兼容的圓角導航欄

回答

相關問題