奇怪的CSS行爲，不能看到什麼是佔用空間

我的網站標題是我的菜單。除了我不得不爲此留出負數的餘量外，我不想這樣做，但由於某種原因，hgroup和nav元素之間會有空間佔用空間。我認爲它可能是搜索框的表單元素，但是當我顯示時：阻止它沒有任何區別。該網站是here。奇怪的CSS行爲，不能看到什麼是佔用空間

另一個奇怪的是，當我將鼠標懸停在子菜單上（例如回收）時，父元素變白。我無法爲我的生活找出原因。請參閱下面的奇怪懸停行爲。

white hover problem

來源

2012-03-26 Nicola

設計在我刷新您的網站後立即更改。至於現在，我所看到的是導航仍然是1px。也許如果你將margin-top從42px減少到41px，那麼問題就解決了。

編輯：所以在Chrome中，有這個1px問題，但在Firefox中，它看起來很好。在Safari和Opera中相同的1px。但是，在IE8中，它看起來很好。我認爲這個問題是由於hgroup定義的高度發生的，如果你已經這樣做了。

The screenshot from Chrome The screenshot from Firefox

[所述第一圖像是從瀏覽器的屏幕截圖，第二個是從Firefox]

編輯2：偏移是由於背景圖像的固定高度。除此之外，一切工作都很好。很顯然，這兩個圖像都有變化，正如你所看到的，Chrome瀏覽器中缺少的是Chrome的偏移量爲1px。我個人不喜歡給可能具有上述結果的元素定義高度。一個好的解決方案是製作一個寬度爲100％的頭部容器和給定的背景圖片，而所有的頭部內容將放在容器內。這樣，無論容器內的內容有多高，背景都將保持其意圖的方式，並且您的導航不會得到抵消。

來源

2012-03-26 16:14:28 DriftingSteps

謝謝你。我的hgroup沒有高度，我只是在我的h1上填充以允許bg img徽標的大小。另外，對於這個奇怪的懸停問題，你有什麼想法嗎？ – Nicola 2012-03-26 19:25:14

我真的不能給你很多關於懸停問題的建議，因爲CSS對我來說似乎很好。我想你提供的屏幕截圖來自Opera，因爲在我的電腦中，Opera是唯一一款提供相同輸出的瀏覽器。 FF，Chrome瀏覽器，Safari瀏覽器，甚至IE8（即除IE的border-radius和box-shadow外）都提供了關於懸停效果的輸出。但是，如果您可以從子菜單中減少「top」的值，您可以**，但不一定**會得到正確的結果。現在我對此不太確定，我不相信它會起作用。但是你可以嘗試一次。 – DriftingSteps 2012-03-27 15:01:19

＃訪問ul ul { \t top：2.65em; <----這個值... \t width：auto; \t margin：0px; } – DriftingSteps 2012-03-27 15:02:06

<h2 id="site-description"></h2>

如果使用螢火蟲/檢查元素，你會看到它，只是你的H1後，佔用了大量的空間。

#site-description { 
color: #7A7A7A; 
font-size: 14px; 
margin: 0 270px 3.65625em 0; 
}

對於在導航白懸停，進行以下更改：

#access ul ul { 
background-color:red; 
}

來源

2012-03-26 15:52:04

謝謝，我不知道爲什麼我沒有看到！我不認爲你知道白色懸停問題的答案嗎？我無法使用螢火蟲進行檢查，因爲它只是懸停在子菜單項 – Nicola 2012-03-26 15:59:42

上請參閱上面的編輯。 – 2012-03-26 16:03:45

不，不是這樣的，它是李父母在子項目上懸停的白色 – Nicola 2012-03-26 16:06:35

使你的身體不再的背景？

來源

2012-03-26 16:01:11

啊H2說明從你的頭和你的菜單，嘗試在mainnav.css分裂您的規則，採取空間似乎像你的：hover與活性物質組合，這就是爲什麼你的類搞亂

這導致您的css中的問題的規則

#access #menu-menu li.current_page_item a, #access #menu-menu li.current_page_item, #access #menu-menu li.current_page_item a:hover, #access #menu-menu li.current_page_item:hover { 
    background-color: #FAFAF0; 
    box-shadow: none; 
    color: #0F0D0C;

來源

2012-03-26 16:02:45 Paradise

錯誤的位置，這不是，我已經改變它，所以它只在a和：hover – Nicola 2012-03-26 16:11:19

奇怪的CSS行爲，不能看到什麼是佔用空間

回答

相關問題