CSS樣式中常用的一種形狀就是箭頭,常常被用于指示、下拉菜單等需要標記的地方。但是在IE6瀏覽器中,箭頭的樣式則與其他瀏覽器不同。因此我們需要進行IE6樣式重構。
.arrow { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: transparent #ffffff transparent transparent; }
上述代碼是常見的箭頭樣式代碼,但是在IE6中,樣式無法正確生成。因此我們需要進行以下修改:
.arrow { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: transparent #ffffff transparent transparent; _border-color: transparent #cccccc transparent transparent; }
上述代碼中,我們給IE6瀏覽器添加了一個下劃線前綴,使得箭頭樣式在該瀏覽器中也能正確生成。
除此之外,還有一種常見的箭頭樣式是三角形樣式,常常被用于下拉菜單等展示中。同樣,IE6中也需要進行樣式重構:
.triangle { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #ffffff transparent transparent transparent; }
同樣地,上述代碼在IE6瀏覽器中樣式無法正確生成,我們需要進行以下修改:
.triangle { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #ffffff transparent transparent transparent; _border-color: #cccccc transparent transparent transparent; }
通過以上修改,我們可以在IE6瀏覽器中正確地生成箭頭和三角形樣式。這對于網站的兼容性和用戶體驗都有一定的提升。
上一篇css樣式給文本進行旋轉
下一篇css樣式類的繼承