在IE7和IE8瀏覽器下,圓角樣式的設置需要一些特殊的CSS處理,以下是一些解決方案:
/* 方案一:使用CSS3的border-radius屬性,但需要配合一些Hack代碼 */ border-radius: 5px; /* 標準代碼 */ -webkit-border-radius: 5px; /* Webkit內核的瀏覽器 */ -moz-border-radius: 5px; /* Firefox瀏覽器 */ -khtml-border-radius: 5px; /* Konqueror瀏覽器 */ -ms-border-radius: 5px; /* IE9+瀏覽器 */ /* IE7和IE8需要使用以下Hack代碼 */ behavior: url(border-radius.htc); /* HTC文件,需要放在服務器上 */ *zoom: 1;
/* 方案二:使用圖片背景,通過設置邊框和內邊距來實現 */ background: url(../images/bg.png) no-repeat; /* 背景圖片 */ padding: 5px; /* 需要設置內邊距,覆蓋圖片 */ /* IE7和IE8需要使用以下代碼 */ border: 1px solid #ccc; /* 邊框需顯示出來 */
以上兩種方案都能解決IE7和IE8下圓角樣式的問題,但第一種方案兼容性更好,更推薦使用。
上一篇ie8css無效
下一篇ie9無法引入外部css