關於css中不同瀏覽器安全色詳解(1/6)

由於瀏覽器的開發商越來越多，關於css教程相容也是各位設計師，站長們討論的熱門話題了，下面我們總結了一些學用中的css相容問題的。

1、div的垂直置中問題

vertical—align:middle;將行距增加到和整個div一樣高line-height:200px;然後插入文字，就垂直置中了。缺點是控制內容不要換行

2 margin加倍的問題

設定為float的div在ie下設定的matgin會加倍。這是ie6都存在的bug。解決方案是在這個div裡面加上display:inline;例如

<# div id="imfloat">

相應的css為

# imflat

{

    float: left;

    margin:5px; /*ie下理解為10px*/

    display:inline; /*ie下再理解為5px*/

}

3、浮動ie產生的雙倍距離

#box

{

    float:left;

    width:100px;

    margin:0 0 0 100px;

     //這種情況下ie會產生200px的距離

     display:inline   //使浮動忽略

}

這裡細說一下block於inline兩個元素，block元素的特點是，總是在新行上開始，高度、寬度、行高、邊距都可以控制的（塊元素）；inline元素的特點是和其他元素在勇一行上，不可以控制（內嵌元素）

#box

{

    display:block; //可以為內嵌元素類比為塊元素，display :inline；//實現同一行排列的效果

display:table； //表格元素

}

4、ie於寬度和高度的問題

ie不認得min-這個定義，但實際上他把正常width和height當做有min的情況來使用。這樣問題就大了，如果之用高度和寬度，正常的瀏覽器裡這兩個值就不會變，如果之用min-width和min-height的話，ie下面根本等於沒有設定寬度和高度。

比如如果要設定背景圖片，這個寬度是比較重要的，要解決這個問題就可以這樣

#box

{

  width:80px;

  height:35px;

}

html

>

body

#box

{

    width:auto;

    height:auto;

   min-width:80px;

   min-height:35px;

}

5、頁面的的最小寬度

  min-width是個非常方便的css命令，他可以指定元素最小值也不能小於寬度，這樣就保證排版一直正確，但是在ie中不識別，但他實際上把width當做最小寬度來使用，為了讓這一個命令在ie上也能應用，可以把<div>放到＜ｂｏｄｙ＞　標籤下，然後為div確定一個類，然後css這樣設計

#container

{

   min-width:600px;

  width:expression(document body clientwidth<600?“600px”,"auto");

}

第一個min-width是正常的，但第二行的width使用了網頁特效，這隻有ie才能認得，這也會讓你的html文檔不太正規，它實際上通過javascript的判斷來實現最小寬度。

首頁 1 2 3 4 5 6 末頁