2013-05-25 160 views
2

這個問題是基於這個JSFiddle。這是一個包含兩個頂級菜單項和三個子菜單(無需腳本即可訪問的結構化)的導航設計。在外觀的元素可以是:問題只在CSS /設計,瀏覽器兼容性IE瀏覽器

 <nav class="top-menu"> 

有一個緊迫的問題:

  1. 只要打開在Internet Explorer中的jsfiddle看看。爲什麼只能在IE中下載?即使在IE9和10.

任何幫助在這裏將不勝感激!

+1

這是一個常見的問題縮放量不是2的乘方。例如,您會注意到對齊問題固定爲50%縮放。就我個人而言,我不會太擔心。 –

+0

@Kolink在某些情況下,位移可見而不縮放。在這一點上,我很糾結它:) – gorn

+0

當我在IE9中看它時,它看起來不錯。除非你正在談論箭頭 –

回答

11

我注意到,「頂頭」塊有不同的高度,來解決這個我添加的line-height CSS規則:

.top-header { 
    padding: 0 0 5px 0; 
    display: inline-block; 
    margin-left: 20px; 
    position: relative; 
    + line-height: 28px; 
} 

而且它目前看來我也一樣在IE和Chrome 。

Updated fiddle

+1

在瀏覽器中瀏覽各自的開發人員工具IE報告在IE中「.top-header」的計算高度是36.8px,而在Chrome中是29px。將「line-height」設置爲mishik建議可以修復問題,或者也可以設置「height:29px」 –

6

在賽拓樸頭 的末尾添加

height :136px \0/; 

,問題就會得到解決檢查 jsfiddle