在進行網頁布局時,CSS的定位是非常重要的一種樣式。但是在實際的開發過程中,不同的瀏覽器對CSS定位的解析方式是并不一致的。這就需要我們在編寫CSS定位樣式的時候,考慮到瀏覽器兼容性問題。
下面是一些CSS定位兼容寫法的示例:
/*1. 絕對定位*/ .example { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /*2. 相對定位*/ .example { position: relative; top: 0; left: 0; } /*3. 固定定位*/ .example { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } /*4. 浮動*/ .example { float: left; margin-right: 10px; } /*5. 清除浮動*/ .clearfloat:after { content: "."; height: 0; display: block; visibility: hidden; clear: both; } /*6. inline-block*/ .example { display: inline-block; *display: inline;/*兼容IE7以下*/ *zoom: 1; } /*7. inline-block下的表單元素對齊*/ .example input[type="text"] { display: inline-block; *display: inline;/*兼容IE7以下*/ *zoom: 1; vertical-align: middle; }
上述代碼可以較好地解決不同瀏覽器下CSS定位的兼容問題。