IE7以下でこのCSSエラーを修正するにはどうすればよいですか？

Question

は、私は最近、私は本当にわからないんだけど、なぜ、私はCSSの第一人者（まだ;）ないです、IE 7を除くすべてのブラウザで完全に正常に動作し、低、私のウェブサイトにいくつかのCSSを追加しました）、私のCSSは間違っているかもしれませんが、 IE7を作成してウェブサイトの外観を下げる原因を説明してください。 IE8や他のブラウザとIE7で比較すれば、私が何を言っているのか分かります。あなたは問題がどこにあるのか指摘できますか？

Webページ：サイドバーの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の動作を修正する必要があります。

<a>でのみ動作し:hover IE6では、修正：http://peterned.home.xs4all.nl/csshover.html

は、あなたが実際にtop/leftの/ etcを設定せずにposition: absolute;を使用しているようです。

は透明PNG画像を使用するhttp://www.twinhelix.com/css/iepngfix/ LIKE「pngfix」のいくつかの種類を使用してください。バグすなわち、楽しみを見つけるため

使用するGoogleとhttp://haslayout.net/のようなサイト。

Answer 2

CSSを使用し

をリセット

あなたのCSSの先頭にthis codeを追加してください。

Answer 3

あなたのコードの例がなければ、私は始めの人にお勧めでき最善のことは、あなたのレイアウトを破る正確なCSSを見つけるまで、ラインにより上記のCSSの行をコメントアウトすることです。私が使用している別のトリックは、すべてに背景色を追加して、物事が壊れている場所を視覚的に見ることができるようにすることです。