CSS3的外觀屬性可以設置元素的用戶界面特征,如是否顯示默認的輸入框樣式,是否顯示滾動條以及是否顯示拼寫檢查。而在IE瀏覽器中,支持外觀屬性的元素僅限于button、fieldset、input、keygen、optgroup、select以及textarea。
// 在IE瀏覽器中設置input元素的外觀為按鈕形式 input[type="submit"] { -moz-appearance: button; /* 兼容Firefox瀏覽器 */ -webkit-appearance: button; /* 兼容Chrome和Safari瀏覽器 */ appearance: button; /* 兼容IE瀏覽器 */ }
上面的代碼會將type為submit的input元素的外觀設置成按鈕形式。雖然IE瀏覽器不支持外觀屬性的元素比較多,但可以采用CSS hack的方式讓特定元素在IE瀏覽器中顯示相應的特征。例如,可以使用下面的CSS hack讓IE瀏覽器隱藏textarea元素的滾動條:
textarea { overflow: auto; /* IE瀏覽器下顯示滾動條 */ overflow: -moz-scrollbars-none; /* 兼容Firefox瀏覽器 */ overflow: -webkit-scrollbar-none; /* 兼容Chrome和Safari瀏覽器 */ -ms-overflow-style: none; /* 兼容IE瀏覽器 */ }
通過以上的CSS hack,在IE瀏覽器中顯示的是帶滾動條的textarea元素。這樣,我們可以為特定的元素在不同的瀏覽器中設置相應的外觀樣式。