的CSS問題，IE/FF兼容性

我有一些CSS不與IE8正常運行。它適用於FF3，但在IE8中，列表項之間有白色框，整個事情都是有問題的。的CSS問題，IE/FF兼容性

這裏是有問題

#golist { 
    width:900px; 
    margin-top:20px; 
    margin-right:auto; 
    margin-left:auto; 
} 
#listing { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
    #listing li { 
     float:left; 
     display:block; 
     width:128px; 
     background:#fff; 
     border:1px solid #000000; 
     height:96px; 
    } 
    #listing li a { 
     border:none; 
    } 
    #listing p { 
     margin-bottom:0; 
    } 


    /* ---- show-hide elements ---- */ 

    #listing li .show{ 
     display:block; 
     width:128px; 
     height:96px; 
    } 
    #listing li .hide { 
     color:#121212; 
     text-align: left; 
     height: 0; 
     overflow: hidden; 
     background-image:url(bghover.png); 
    } 
    #listing li:hover .hide, #listing li.over .hide { 
     cursor: pointer; 
     height: 96px; 
     width:128px; 
     text-align:center; 
    } 
    #listing li:hover .show, #listing li.over .show { 
     height: 0; 
     overflow: hidden; 
    } 

    #listing li a, #listing li a:visited, #listing li a:active { 
     color:#121212; 
     font-size:12px; 
     text-decoration:none; 
    } 
    #listing li a:hover { 
     color:#121212; 
     text-decoration:none; 

    }

CSS和這裏是代碼本身：

<div id=golist> 
    <ul id=listing> 
    <li class=show> 
     <a href=#> 
     <img src=images/image.jpg height=96px width=128px border=0> 
     </a> 
     <div class=hide> 
     <a href=link.html>Link</a> 
     <p>Some info</p> 
     </div> 
    </li> 
    </ul> 
</div>

的想法是有一個128x96框的圖像。在鼠標懸停時，一層會彈出一些文字。

來源

2009-06-26 mrpatg

開始通過清除所有默認的填充和利潤的CSS文件中：

* { padding: 0; margin: 0 }

然後你就不得不相應地調整你的代碼，因爲每個瀏覽器會將其自身的填充和利潤的所有屬性。

一旦你得到它，你是在Firefox和Safari喜歡它，使用條件語句在適當的IE瀏覽器的樣式表拉點：

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]--> 
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]--> 
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

在樣式表只覆蓋哪些需要重寫：

萬事達CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

（無論出於何種原因IE 8可能需要寬度的重複聲明。）

來源

2009-06-29 18:06:12 Elle

在這裏你可以發現這一點：http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

這是文章的一部分：

它實際上很容易從IE 6隱藏樣式，但使他們的標準兼容瀏覽器中可見。使用兒童選擇器。

在我構建的一個設計中，我創建了一個需要邊距和填充的雙列布局。這意味着，我被擊中了盒模型的差異，當我在IE 6瀏覽網頁我的第一個CSS樣式表對Firefox包含這樣一行：

div#nav { width: 150px; margin-left: 20px; }

這Firefox和Safari瀏覽器進行的頁面排隊完美，但在IE中，導航欄被推到右邊太遠。

所以，我轉換線路使用子選擇。該#nav DIV是body標籤的孩子，所以我改了行改爲：

body > div#nav { width: 150px; margin-left: 20px; }

當然，這樣做的#nav DIV失去IE所有它的屬性，所以我需要在添加一些IE風格讓IE 6看起來沒問題。我加入這行的CSS：

#nav { width: 150px; margin-left: 10px; }

此行的CSS的位置是重要的，如果我的網頁仍看好在Firefox和Safari。 IE瀏覽器需要先行。 Firefox和Safari將會讀取該行，然後它將被文檔中body> div＃nav選擇器覆蓋。 IE 6將讀取第一行並設置樣式。它會忽略子選擇器，因爲它不識別它們。當IE 7出現時，它會像Firefox和Safari一樣行事。

通過爲符合標準的瀏覽器設計，然後再修改你的CSS支持IE的怪癖，你少花了很多時間進行設計和更多的時間實際設計擺弄。

來源

2009-06-26 18:57:15

的CSS問題，IE/FF兼容性

回答

相關問題