css兼容一直是很讓人頭疼的事，我們在這里就簡單介紹常見的兼容問題和其相關的解決方案。
強制內核渲染
比如說360瀏覽器是分兼容模式和極速模式，兼容模式使用的是IE內核，而極速模式使用的Chrome的內核(webkit)，因此強制內核渲染也是必須的。另外，即使是在IE下，默認使用的內核也是不同的。
//強制使用IE7模式來解析
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE8″>
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
// 對于目前來說加上下面的代碼就好了
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
空白圖片 base64
data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==
不要滾動條
html ::-webkit-scrollbar {
/*不要滾動條*/
display: none;
}
@-ms-viewport {
width: device-width;
}
input/trextarea
/*取消輸入框默認有內部陰影*/
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
：
/*取消input和textarea的聚焦邊框*/
input{outline:none}
/*取消textarea可拖動放大*/
textarea{resize:none}
/*placeholder設置顏色*/
textarea::-webkit-input-placeholder{ color:#be916a;}
/*input placeholder文字垂直居中(Mobile & PC)*/
input{
line-height: normal; /* for non-ie */
line-height: 22px\9; /* for ie */
}
/*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
移動端去掉長按選擇
div,span,p,img{ -webkit-user-select: none;/*禁用手機瀏覽器的用戶選擇功能 */ -moz-user-select: none;}
禁止長按鏈接與圖片彈出菜單
a, img {
-webkit-touch-callout: none;
/*禁止長按鏈接與圖片彈出菜單*/
}
display:inline-block 間隙去除
.wrapper{
font-size:0
}
.inlineblock{
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
}
<div class='wrapper'>
<div class="inlineblock"></div>
</div>
響應式
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
畫1px的細線
.border1px{ position: relative;}
.border1px:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid red;
border-left:1px solid red;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
占位圖生成
http://www.atool.org/placeholder.png?size=500x200&text=aTool全站廣告位征集&&bg=836&fg=fff
http://placehold.it/640x320 // 推薦
http://placekitten.com/200/300
瀏覽器初始化樣式不同導致兼容問題
兩個瀏覽器樣式初始化庫： reset.css 和 normalize.css
透明度兼容css
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
或者：filter:alpha(opacity=40);
非ie: opacity:0.6
盒子模型
標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分； IE盒子模型的范圍也包括 margin、border、padding、content。
和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
因此，問題主要表現在css中的width是否計算border和padding的問題，這個是默認的盒子解析模型不同導致的。
IE6：中包括border和padding(box-sizing: border-box;)
IE7和非IE：width寬度不包括border和padding(box-sizing: content-box;)
解決方式： 根據使用方式，寫好box-sizing屬性。
浮動問題
子元素進行浮動，而父元素沒有撐開盒子
.clearfix:before,.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */}
.clearfix:after { clear: both;}
高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或padding時
例如：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容＜/p>
</div>
解決技巧：
- 給div 加上border
- 在P對象上下各加2個空的div對象CSS代 {height:0px;overflow:hidden;}
超鏈接訪問過后hover樣式就不出現的問題
解決技巧
a:link {}
a:visited {}
a:hover {}
a:active {}
calc 的使用
瀏覽器支持的不是很好，而且在使用的時候要加上廠商前綴，達到兼容性。另外，注意減號之間的空格。
width: calc(100% - 80px);
#formbox {
width: 130px;
/*加廠商前綴，操作符（+，-，*，/）兩邊要有空格）*/
width: -moz-calc(100% / 6);
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
Chrome中文版12號以下的字體不識別
html{-webkit-text-size-adjust:none;}
/*針對Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:400px; }
}
注意事項
記得清除浮動。(在具有float元素的容器底部加入清除浮動)
浮動元素盡量給一個確定的寬度。
盡量使用padding代替margin。
若同時有float及margin，加入display:inline。
盡量避免使用絕對定位進行布局；若使用，需明確指定z-index, top, left；
盡量避免使用半透明png圖片(PNG-24)；若使用，用PNG修復補丁修復之；
若出現寬度被撐開現象，設置overflow:hidden;
若出現莫名padding，設置 font-size:0 及 overflow:hidden;
其他技巧
FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
水平居中. margin: 0 auto;(當然不是萬能)
若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
圖片默認有間距
解決方案：使用float屬性為img布局
標簽最低高度設置min-height不兼容
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：
{
min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
