PC端，瀏覽器兼容、IE兼容（圓角、陰影、透明）

以下所有兼容性問題都是借鑑的 Danna_Danna 的一篇文章，因爲文章時間比較長了，所以根據我自己的測試和查找，將會有一些小改變，自己寫一遍，以後用起來好找，有一個整理的過程更安心。

測試demo已上傳：http://download.csdn.net/detail/qq_31164127/9874669

1、隱藏滾動條

<body scroll='no'></body>  /* 只支持ie7/雜項 */

body{
    overflow:hidden; // 僅支持除了ie7文檔模式外的各種瀏覽器
}

html {
    overflow:hidden; // 支持所有的瀏覽器
}

2、禁用中文輸入法的問題

(1) FF和IE中有效 ime-mode:disabled;

 <input type="text" name="number" id="filter" style="ime-mode:disabled;">

(2) 其他瀏覽器用JS實現

function clearNoNumber(_this){
   var result = $(_this).val().replace(/[^0-9a-z]/ig,'');
   $(_this).val(result);
}
$('#filter').on('focus',function () {
   clearNoNumber(this);
});
 $('#filter').on('keyup',function () {
   clearNoNumber(this);
});
$('#filter').on('blur',function () {
   clearNoNumber(this);
})

3、禁用粘貼

<input type="text" οnpaste="return false;">

4、鏈接點擊後hover樣式不變

遵循 love hate 的原則 =_= ：
a:link — a:visited — a:hover — a:active
L - V - H - A

5、超過長度後用省略號顯示

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eligendi ex quam soluta velit veniam! Aliquid architecto commodi doloremque itaque, labore maiores non omnis porro rem sint, unde veritatis voluptatem!
</p>

CSS 一行超過長度時的省略表示

p{
    width:100px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

CSS 多行超過長度時的省略號表示 ( 只有擁有 -webkit- 內核的瀏覽器有效)

p{
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

其他瀏覽器實現方式（利用僞元素）

p{
   width: 150px;
   position: relative;
   line-height: 20px;
   max-height: 40px;
   overflow: hidden;
}
p:after{
   content: '...';
   position: absolute;
   right: 0;
   bottom: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, transparent, #fff 55%);
   background: -o-linear-gradient(right, transparent, #fff 55%);
   background: -moz-linear-gradient(right, transparent, #fff 55%);
   background: linear-gradient(to right, transparent, #fff 55%);
}

現在，不支持僞元素（:after 和 :before）的瀏覽器仍然沒有效果。
還沒有研究 ie6 等怎麼支持僞元素( :after 和 :before)=_= 下次的，我好好研究研究。。

6、使連續長字段自動換行

還是上面的 p 元素和內容

p {
    width:150px;
    word-wrap:break-word;
}

7、清除浮動

解決問題：li設置爲浮動，後面的li緊隨其後，不能換行

<ul>
    <li>1.一級標題
        <div>二級標題</div>
    </li>
    <li>2.一級標題
        <div>二級標題</div>
    </li>
    <li  class="clearfix">3.一級標題
        <div>二級標題</div>
    </li>
</ul>

li{
   float: left;
   margin: 0 15px 15px 0;
   background: #ffa;
 }
.clearfix{
   clear: both;
}

8、如何對齊文本和文本輸入框

用戶名： <input type="text" class="alter" />
密碼： <input type="password" class="alter" />

.alter {
    height:100px;
}

在除了IE8以外的瀏覽器，文字是位於輸入框的中間 middle 位置，

但是在IE8中的效果是：

解決方法爲： vertical-align:middle;

.alter{
    height: 100px;
    vertical-align: middle;
}

9、容器寬度在瀏覽器中解釋不同

<div>我是測試數據</div>

div {
    width:200px;
    border:10px solid #ffa;
}

問題：如下例子，在IE中 div 的寬度爲200px，而在chrome等瀏覽器中的實際寬度是 220px。
解決方案：① 手動將 ie 的寬度設置爲：實際width = contentWidth + padding + border

div {
    width:200px;
    width:220px\9; /* IE6, IE7, IE8, IE9, IE10 */
    border:10px solid #ffa;
}

② 給 chrome 中的元素設置 box-sizing: border-box ; （推薦解決方法）

div { // 在所有瀏覽器中的實際寬度都是200px
    width:200px;
    box-sizing:border-box;
    border:10px solid #ffa;
}

10、div 居中問題

在 IE 的 Quirks 文檔模式下（IE6的怪異模式），margin: 0 auto; 並不能解決問題。需要使用 text-align: center ;

<div>測試居中問題</div>

在chrome、FF、Opera下 margin: 0 auto; 有效

div{
    width: 150px;
    margin: 0 auto;
    background: #aff;
}

在 IE的怪異模式下，需要給 body 設置 text-align:center;

<body style='text-align:center;'></body>

11、min-height 問題

div{
    min-height:200px;
    height:200px;
    height:auto!important;
}

12、禁止用戶選中文字

-moz-user-select: none;
-o-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;

13、IE的背景透明，文字不透明

<div class="mask">
    <p>一起搖擺</p>
</div>

第一種方法：曲線救國

.mask{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    filter:Alpha(opacity=30);
    background: #000; /* 以上兩行是實現 IE 背景透明 */
    background: rgba(0,0,0,0.3); /* 除 IE 外的其他瀏覽器的背景透明 */
    color:#fff;
    text-align: center;
}
.mask p{
    position: relative; // IE 的文字不透明
}

第二種

.mask {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000,endColorstr=#30000000); /* 文字直接就是不透明的 */
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-align: center;
}

14、IE 的 border-radius圓角和 box-shadow陰影

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

 li{
     width: 200px;
     height: 200px;
     -moz-border-radius:100px; /* 早期版本的Firefox */
     -webkit-border-radius: 100px; /* 早期版本的Safari、chrome */
     border-radius: 100px; /* IE9、Opera、Chrome、Firefox、Safari*/
     moz-box-shadow: 10px 10px 20px #000;    /* 早期版本的Firefox */
     -webkit-box-shadow: 10px 10px 20px #000; /* 早期版本的Safari、chrome */
     box-shadow: 10px 10px 20px #000; /* IE9、Opera、Chrome、Firefox、Safari*/
     behavior: url(css/ie-css3.htc);
     background: #aaffff;
}