怎么解決瀏覽器兼容性問題
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px; IE6 專用 *height: 100px;
IE7 專用 *+height: 100px; IE7、
FF 共用 height: 100px !important;
1.內外邊距被統一:
不同瀏覽器對HTML標記所具有的內外邊距屬性具有不同的定義。
因此如果想消除這種差距,應該在相應的CSS部分加入以下CSS代碼:
*{margin:0px;padding:0px;}
借於此,所有標記的內外邊距被統一起來。
2.margin不一致的問題:
當有多張圖片需要排在一行時,我們通常使用“Float:Left”來實現,這樣一來,瀏覽器就存在兼容性問題。導致圖片與后面的內容存在margin不一致的問題。對此一種解決方法就是給圖片添加“Display:inline”項即可。
3.div居中問題:
通常我們會利用“vertical-align:middle”來實現,這對於搜狗瀏覽器來說,是正常的,但是對於IE瀏覽器來說,卻並沒有效果。對此,一種較好的解決方法是:將文字的行高height-line:設置與div一樣時即可解決問題。
4.important!:
FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決) 如width:115px !important;width:120px;padding:5px;必須注意的是, !important; 一定要在前面。
5.給a標簽內內容加上樣式:
若需給a標簽內內容加上樣式, 需要設置 display: block;(常見於導航標簽)
6.FF 和 IE 對 box 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
7.ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標簽和內容列表)
8.外部 wrapper :
作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應
7.手形光標:
關於手形光標. cursor: pointer.
8.IE6hover的鏈接:
在IE6和IE7下,躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素,如果在他之后有不浮動的內容,並且有一
些定義了:hover的鏈接,當鼠標移到那些鏈接上時,在IE6下就會觸發躲貓貓。
解決方法很簡單:
1.在(那個未浮動的)內容之后添加一個<span style="clear: both;"> </span>
2.觸發包含了這些鏈接的容器的hasLayout,一個簡單的方法就是給其定義height:1%;
9.IE下z-index的bug
在IE瀏覽器中,定位元素的z-index層級是相對於各自的父級容器,所以會導致z-index出現錯誤的表現。解決方法是給
其父級元素定義z-index,有些情況下還需要定義position:relative。
10.: Overflow Bug
在IE6/7中,overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;
11.怎么解決IE6雙倍邊距問題display:inline
解決辦法:當將其display屬性設置為inline時問題就都解決了。
總結:這個現象僅當塊級對象設置了浮動屬性后才會出現,內聯對象(行級對象)不會出現此問題。並且只有設置左邊距和右邊距的值才會出問題,上下邊距不會出現問題。
方法二:,!important解決,比如
margin-left:10px !important;;
_margin-left:5px;
12. css實現透明濾鏡
filter:alpha(opacity=12); 支持 IE 瀏覽器
-moz-opacity:0.12; 支持 FireFox 瀏覽器
opacity:0.12; 支持 Opera,safari 等瀏覽器
ps:現在困擾我的就是,背景是實現了透明效果,可是這個層里面的所有元素:CSS實現背景透明效果這幾個字也跟着透明了.這個以后我還得努力尋求解決辦法,有待解決!
13.如何對齊文本與文本輸入框
加上 vertical-align:middle;
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>
14.為什么無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
15.怎么樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設置透明
<param name="wmode" value="transparent" />\
15. 游標手指cursor
cursor: pointer 可以同時在 IE FF 中顯示游標手指狀, hand 僅 IE 可以