圓角（CSS和JavaScript）

Question

請訪問：http://jlecologia.com/page1c.html，看問題

頂盒看起來很好，但在IE6中存在雙頂部和底部邊界。

有人可以指出我做錯了什麼嗎？

或者任何人都可以告訴我一個JavaScript的圓角框，接受與邊界不等的效果。我測試了一些，他們都失敗了，所以我已經完成了圖片圓框，但我更喜歡jQuery的JavaScript方法。

Answer 1

的默認背景圖片，讓他們重複。

嘗試：background：transparent url（../ images/roundbox-top.jpg）0 0 no-repeat;

---

後評論編輯，以提供完整的解決方案：

IE6設置空的div到您的字體大小的高度，如果在css中指定的高度小於字體大小。

在#roundbox .TOP和#roundbox .bottom，把

font-size:0; 
line-height:0; 

這將摺疊DIV合適的高度。

Answer 2

嘗試使用Firefox中的Web開發人員工具欄來驗證CSS和HTML。我做了一個快速檢查，每個都有多個錯誤。我懷疑渲染的區別是因爲IE不能處理格式錯誤的內容和FF。尤其是，即使是CSS文件中的小錯誤，在IE中也會出現滾雪球，並且融化了一個好的佈局。不確定IE7和IE8在這方面做了什麼改進。

Answer 3

看看在JQuery的round corner plugin 而here是一個演示

Answer 4

除了對底部邊框所做的更改之外，將類爲「頂部」的元素的字體大小設置爲7px可將它修復到我的IE6中。