幾個IE CSS問題

好吧，我承認我總是看到人們抱怨IE瀏覽器（Internet Explorer XX），我從來沒有真正抱怨，但我知道我可能是錯的。我是一名硬核Chrome用戶，偶爾我會打開Firefox的某些東西或測試一個視圖，但從來沒有IE瀏覽器，直到有一天。我在一個我正在工作的網站上打開IE 8，並且感到震驚，有太多的錯誤，我不是在指責IE，我只是做了適當的CSS和設計，我更像是一個後端編碼器。因此，最有可能的，我只是沒有使用正確的CSS幾個IE CSS問題

所以下面是從我的項目的IE8的圖像，我已經標記的問題在於每個部分。

enter image description here

1）此背景應該擴大頁面的寬度和它在Firefox和Chrome一樣。

下面是一些CSS這一領域

#header-wrap { 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    height: 95px; 
    background: #F3F3F3 url(../images/layout/blue-spike.gif) repeat-x; 
    border-bottom: 1px solid #DEDEDE; 
}

2）這是一個導航無序列表，它應該顯示在一行中的所有列表項，從左到右，當它到達廣啓動項目的一個新的行左到右，它在Firefox和Chrome

#tag-list li a { 
    color: white; 
    text-transform: uppercase !important; 
    background: #585858; 
    padding: 4px 6px 4px 6px!important; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font: .8em Helvetica,Arial,sans-serif; 
    margin: 1px 0px 3px 3px; 
    display: block; 
    float: left; 
}

3）從2號相同的代碼，而是方角的，每一個環節應該是圓角，它與Firefox的這種方式和Chrome與邊框半徑

同標題部分，它應該擴大網頁的整個寬度，但它不

#footer { 
    clear: both; 
    background: #444 url(../images/noise-gray.png) center; 
    color: #666; 
    font-size: 1.1em; 
    with: 100%; 
    padding-bottom: 15px; 
}

這是因爲這是在腳的頂部鋸齒狀的fotter其他背景圖片呃，不，即使在IE瀏覽器顯示了以下

#footer-zig-zag { 
    background: url(../images/shake-up.png) top repeat-x; 
}

這個代碼，我意識到這是一個含糊不清的問題，我不希望有人來重新編寫網站，提示，爲何我還沒有加入所有的HTML 。

如果有什麼脫穎而出，成爲不正確而它與IE瀏覽器，我只是如果從上面的CSS要求。

我從來沒有意識到Chrome和Firefox有多麼糟糕或不同，而且我不想犯同樣的錯誤，我不在乎支持IE 100％，但我認爲我可以做得更好一點我目前的。

感謝您的幫助

來源

2011-11-29 JasonDavis

您使用哪種DOCTYPE？ –

在菜單中 - 浮動LI，而不是A. –

@Diodeus我使用HTML 5 one <！doctype html> LI上的float也解決了這個問題，謝謝 – JasonDavis

沒有看到它完全，你是對的，它有點模糊，但是副手，

2）看起來像李是塊顯示....將它們設置爲float：left;顯示：內聯;

3）ie8中不支持border-radius。對於ie9，您需要添加-ms-border-radius;你可以找到js修復爲< ie9邊界半徑支持

1）和4a）再次，很難說，但與寬度：100％，他們沒有覆蓋它，我要假設ie正在閱讀父寬度作爲正確的東西。將父元素設置爲寬度：100％。

你可以用條件註釋目標即讓你不惹你真正的風格是這樣的：

< - [如果IE] > <風格> div.parentelement {寬度：100％ } < /風格> < [ENDIF] - >

來源

2011-11-29 17:55:40 albert

幾個IE CSS問題

回答

相關問題