水平菜單造型

我正在一些網站上工作，並遇到水平菜單間距的主要問題。一個網站是daniellesshoes.com（這是一個BigCommerce網站）另一個是blog.daniellesshoes.com（這是WordPress）水平菜單造型

我的問題是這樣的。我們爲客戶製作這些網站。我們希望菜單是紫色的，並且在懸停時突出顯示粉紅色。在這兩個問題。 1.如果客戶端從BigCommerce CSS添加一個菜單項，它會弄亂間距..

第二個問題是，IE6,7,8和9都顯示像素差異的間距和一些禁用溢出隱藏等等等等等等等

所以要麼1.我想搭乘所有風格（BigCommerce出於某種原因帶有7+樣式表，所有重寫海誓山盟等），並重新設計我自己的 - 正確的方式！或者2.找出我必須添加的內容，以使其在每個瀏覽器上看起來都一樣。最後，一旦我完成了，我想他們自動空間..

請查看上述網站和檢查元素，然後讓我知道我該怎麼做。謝謝！

來源

2012-05-25 user1232986

規則基於列表的菜單：

使用CSS重置
不要樣式的LI標籤（非排名:,顯示：與浮:)
使用display:block和風格在A如果你使用它們

見我tutoria標籤都有效

清除你的花車l：I Love Lists

來源

2012-05-25 20:59:09

更完整且最新的重置CSS：http://meyerweb.com/eric/tools/css/reset/ – Knyri

在CSS中自動空間項的唯一方法是使用display: table;和table-cell和。它適用於每個現代瀏覽器和IE8，因爲它最近在任何地方都支持CSS2.1。這個的jsfiddle的

首先檢查例如：列出http://jsfiddle.net/aznxD/
重置CSS是用於表示完成：

ul { 
    margin: 0; 
    padding: 0; 
}

無需改變list-style如果你已經改變display的價值li。各種復位CSS的40行其他行不是列表，這是OT。

以前的小提琴中的第二個例子是針對IE6/7，通過使用排序display: inline-block（請參閱CSS中的評論和屏幕的JS左下部分）以及計算的填充將取決於菜單中的項目數和文本的長度。這就是物品不會自動放置的原因...您可以通過conditional comments in a specific stylesheet or around html element with class(es)添加這些特定規則。

這不是像素的完美...但它不是那重要的是：除了你會看到你的網站在許多瀏覽器和它們的不同版本中沒有人。
也許有些人會在兩個瀏覽器上看到您的網站，一個在工作，另一個在家。他們會注意到我的示例是957px寬而不是960px了嗎？他們會關心還是會高興地看到，與大多數爲「現代瀏覽器」設計的網站相比，舊版瀏覽器根本沒有任何關心和測試的可怕性？（爲現代瀏覽器設計不是問題，不關心所有舊的沒有回退是是一個問題）
恕我直言，你的時間將更好地用於提供媒體查詢支持響應式網頁設計，也許移動第一在第二次或第三次，並刪除您的CMS中的所有未使用的CSS規則，如果它臃腫：未來更好的維護和現在和將來更好的性能。

來源

2012-05-25 23:00:53 FelipeAls

水平菜單造型

回答

相關問題