半夜睡不著覺，起來寫第一博。
近段時間，公司要給乙個**產品增加乙個換色功能，安排我負責該事項。
之前參與過一些定製專案，是基於該產品的二次開發，說實話裡面的前端結構很混亂。所以第一步就是將html前端標籤進行了重構，規範了標籤結構和classname。第二步就開始按照產品原有的樣式增加css**。
.top_border.left_border.right_border.bottom_border
<div>
<
div
class
="top_border"
>
div>
<
div
class
="left_border"
>
div>
<
div
class
="content"
>
...div>
<
div
class
="right_border"
>
div>
<
div
class
="bottom_border"
>
div>
<
div>
在重構時，我直接把這個結構修改為最簡化的版本
<div
class
="content"
>
div>
這裡就有點問題：使用boder-radius可以實現圓角邊框，但是不支援ie7 、ie8。
當時我認為，我的這個規範是正確的，所以希望通過不修改html的**結構來完成對ie7/ie8的相容。
搜尋了一下ie7/ie8的解決方案：
就以此為基礎，使用js來對ie7/ie8進行相容。主要**邏輯如下：
if( typeof (document.documentelement.style["border-radius"]) == "string")//判斷是否支援
);
this.css();
var bordercolor = this.css("border-color");
var background = this.css("background-color");
var borderstyle = this.css("borer-style");
//重設邊框，只保留兩側邊框
this.css();//
//建立html結構，實現上下邊框
var setting = ;
var i = 0;
for(; i < 3; i++)
);b.prepend(t.clone(
true
)); }
var t = $("").css();
b.prepend(t.clone(true));
}});
$(".content").borderradius(5);//設定圓角
$(".border1").borderradius(5);
}
雖然執行時的html結構變化了，但是編碼時的html結構沒有變化，也算是一種相容方式吧。
還記得以前也有js處理過一些其他偽類的相容，一起列出來：
場景：滑鼠移入顯示二級選單。
通常的做法：
.menu{}.menu li ul.menu li:hover ul
<ul class
="menu"
>
<
li><
a>一級
a>
<
ul >
<
li><
a>二級
a>
li>
<
li><
a>二級
a>
li>
ul>
li>
ul>
當ie6不支援時，可以進行調整
.menu{}.menu li ul.menu li:hover ul,.menu li_hover ul/*增加了乙個樣式名*/
增加相容js
if(不支援:hover),function())
}
增加下面的js，還可以相容觸屏
if(觸屏)
else
});}
以上這些方式僅是個人喜好而已。歡迎各位發表見解。
CSS中一些相容問題
1.img底部有一小段空白 加個邊框看看就知道了 解決 display block vertical align top middle bottom 不是baseline就行 2.ie6，float方向與margin方向一致時，margin會雙倍顯示 解決 display inline 3.ie6，...
CSS相容的一些解決方法
css 對瀏覽器的相容性有時讓人很頭疼,或許當你了解當中的技巧跟原理,就會覺得也不是難事,從網上收集了ie7,6與fireofx的相容性處理方法並整理了 一下.對於web2.0的過度,請盡量用xhtml格式寫 而且doctype 影響 css 處理,作為w3c的標準,一定要加doctype宣告.cs...
前端 易混淆的一些css屬性
html平時常見的塊元素有 div,p,h1,h2,h3等，address 位址 blockquote 塊引用 center 舉中對齊塊 dir 目錄列表 div 常用塊級 dl 定義列表 fieldset form控制組 form 互動表單 h 標題標籤 hr 水平分隔線 isindex inpu...