2013-08-30 103 views
1

我的導航欄是一個悲劇性的混亂在IE7中顯示時。我對這個遺留編碼有點新感覺,並且從我讀到的內容來看,僞狀態,z索引和絕對位置都存在問題。導航條IE7愁楚

我已經試過各種事情,試圖讓它正常,但沒有喜悅反應。

我也使用

<!--[if IE 7]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> 
<![endif]--> 

嘗試作爲我的印象是,這將有助於下但問題依然存在。

任何幫助,非常感謝。

<aside> 
    <div class="module blue"> 
     <h2 class="wtf">Index<a href="../index.php">Select</a></h2> 
     <br/> 
     <h2 class="wtf">Admin Home<a href="../admin.php">Select</a></h2> 
    </div> 
</aside> 

的CSS:

aside { display: block; } 

h2 { 
    font-size: 26px; 
    position: relative; 
} 

aside { 
    padding-top:10px; 
    width: 18%; 
    float: left; 
    min-width:250px; 
} 

.navMenu{ 
    display:block; 
    padding-top:10px; 
    width: 18%; 
    float: left; 
    min-width:250px; 
} 

.module { 
    background: #eee; 
    margin: 0 0 10px 0; 
} 
.module h2 { 
    background: #ccc; 
    line-height: 2; 
    padding: 0 0 0 10px; 
    font-size: 16px; 
    margin: 0 0 4px 0; 
    box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2); 
} 
.module h2 a { 
    float: right; 
    position: relative; 
    text-decoration: none; 
    color: #333; 
    padding: 0 10px; 
     border-left: 5px solid white; 
     -webkit-transition: padding 0.1s linear; 
     -moz-transition: padding 0.1s linear; 
     -ms-transition: padding 0.1s linear; 
     -o-transition: padding 0.1s linear; 
    } 

    .module h2 a:hover { 
     padding: 0 14px; 
    } 
    .module h2 a:active { 
     padding: 0 16px; 
    } 

    .module h2 a:before, 
    .module h2 a:after { 
     content: ""; 
    position: absolute; 
     top: 50%; 
     width: 0; 
     height: 0; 
    } 
    .module h2 a:before { 
     left: -12px; 
     border-top: 8px solid transparent; 
     border-bottom: 8px solid transparent; 
     border-right: 8px solid white; 
     margin-top: -8px; 
    } 

    .module.blue h2 a { 
     background: #a2d6eb; 
    } 
    .module.blue h2 a:hover { 
     background: #c5f0ff; 
    } 
    .module.blue h2 a:after { 
     left: -5px; 
     border-top: 6px solid transparent; 
     border-bottom: 6px solid transparent; 
     border-right: 6px solid #a2d6eb; 
     margin-top: -6px; 
    } 
    .module.blue h2 a:hover:after { 
     border-right-color: #c5f0ff; 
    } 

感謝您的幫助!

+0

你能確切地解釋悲劇性亂七八糟的樣子在IE7這不是很好嗎? – glenatron

+0

恩,選擇框已經丟失,並且位於h2名稱後面。如果我從H2中移除相對於它的幫助,從A標記中刪除浮動標記也有幫助,但我無法完成。 – null

+1

重新IE7.js - 請注意,IE7.js旨在使工作的IE6 IE7一樣。如果你想讓IE7像IE8或IE9一樣工作,你需要使用IE8.js或IE9.js,而不是IE7.js。 – Spudley

回答

0

希望這可以幫助別人。

在我的例子,在H2標籤的相對位置是造成嚴重破壞。

我通過開發模式曾在IE瀏覽器,直到我能得到我wasnted結果,彈出代碼到一個新的CSS文件和使用的IF IE條件語句來調用樣式表。

,因爲它是在以後的版本,但它是一個該死的視線更好:)

感謝所有誰幫助