如何解決IE7中的這個CSS錯誤和更低？

Question

我最近在我的網站上添加了一些CSS，它在除IE 7以及更低版本之外的所有瀏覽器上都能很好地工作，我不太確定爲什麼，而且我也不是CSS大師（還;）），而且我的CSS可能是錯誤的，但你能解釋一下是什麼讓IE7降低了網站的外觀？如果你在IE8或任何其他瀏覽器和IE7中比較它，你會看到我在說什麼。你能指出問題出在哪裏嗎？

網頁：http://inelmo.com/inelmo

側邊欄的CSS：（我只包含這一點，因爲問題啓動一次我加入了這部分代碼）

#sidebar { 
    width: 440px; 
    float: right; 
} 

/* Navigation Menu */ 
#navigationMenu { 
    width: 50px; 
    position: absolute; 
    z-index: 99; 
} 

#navigationMenu li { 
    list-style: none; 
    height: 39px; 
    padding: 2px; 
    width: 40px; 
} 

#navigationMenu span { 
    width: 0; 
    left: 38px; 
    padding: 0; 
    position: absolute; 
    overflow: hidden; 
    font-size: 18px; 
    font-weight: bold; 
    letter-spacing: 0.6px; 
    white-space: nowrap; 
    line-height: 39px; 

    -webkit-transition: 0.25s; 
    -moz-transition: 0.25s; 
    -o-transition: 0.25s; 
    -ms-transition: 0.25s; 
    transition: 0.25s; 
} 

#navigationMenu a { 
    background: url("../images/nav_bg.png") no-repeat; 
    height: 39px; 
    width: 38px; 
    display: block; 
    position: relative; 
    text-decoration: none; 
} 

#navigationMenu a:hover span { 
    width: auto; 
    padding: 0 20px; 
    overflow: visible; 
} 

#navigationMenu a:hover { 
    text-decoration: none; 
} 

/* Home Button */ 
#navigationMenu .home { 
    background-position: 0 0; 
} 

#navigationMenu .home:hover { 
    background-position: 0 -39px; 
} 

#navigationMenu .home span { 
    background-color: #7da315; 
    color: #3d4f0c; 
    text-shadow: 1px 1px 0 #99bf31; 
} 

/* Categories Button */ 
#navigationMenu .categories { 
    background-position: -38px 0; 
} 

#navigationMenu .categories:hover { 
    background-position: -38px -39px; 
} 

#navigationMenu .categories span { 
    background-color: #1e8bb4; 
    color: #223a44; 
    text-shadow: 1px 1px 0 #44a8d0; 
} 

/* Top Button */ 
#navigationMenu .top { 
    background-position: -76px 0; 
} 

#navigationMenu .top:hover { 
    background-position: -76px -39px; 
} 

#navigationMenu .top span { 
    background-color: #c86c1f; 
    color: #5a3517; 
    text-shadow: 1px 1px 0 #d28344; 
} 

/* AntiTop Button */ 
#navigationMenu .antiTop { 
    background-position: -114px 0; 
} 

#navigationMenu .antiTop:hover { 
    background-position: -114px -39px; 
} 

#navigationMenu .antiTop span { 
    background-color: #af1e83; 
    color: #460f35; 
    text-shadow: 1px 1px 0 #d244a6; 
} 

/* Logo styling */ 
#logo { 
    width: 390px; 
    margin: 0 0 0 50px; 
    position: absolute; 
    z-index: -1; 
} 

/******/ 
#sideWrapper { 
    width: 437px; 
    background: url("../images/sidebar_strip.png") repeat-x; 
    padding: 15px 0 0 3px; 
    margin: 190px 0 0 0; 
} 

Answer 1

使用float:xxx時，還應該附加display: inline來修復較舊的IE行爲。

在IE6 :hover只有<a>工作，修復：http://peterned.home.xs4all.nl/csshover.html

你似乎使用position: absolute;而不實際設置top/left /等。

使用某種'pngfix'如http://www.twinhelix.com/css/iepngfix/來使用透明png。

使用谷歌和網站如http://haslayout.net/找到樂趣，即錯誤。

Answer 2

使用CSS重置

將this code添加到您的CSS頂部

Answer 3

沒有你的代碼的例子，我可以建議有人開始做的最好的事情是逐行註釋掉上面的CSS，直到找到打破布局的確切CSS。我使用的另一個技巧是將背景顏色添加到一切，以便您可以直觀地看到事情正在破裂的地方。