css兼容性问题集

IE兼容性hack： 6减 7乘 8除

.ie6_7_8{
    color:blue; /*所有浏览器*/
    color:red\9; /*IE8以及以下版本浏览器*/
    *color:green; /*IE7及其以下版本浏览器*/
    _color:purple; /*IE6浏览器*/
}

input textarea等输入框，在苹果ios显示有内阴影、圆角边框、按钮渐变透明bug

• 内阴影、按钮渐变透明：
  {appearance: none; -moz-appearance: none; -webkit-appearance: none;}
• 圆角：
  {border-radius:0;}

---

限制input type=”file”上传文件类型

• 正常写法：

<input type="file" value="上传图片">

效果如下：

• 限制性写法 参考W3C链接

<input accept="image/*" type="file" value="上传图片">

或

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

andriod效果如下：

iOS效果如下：

---

display:inline-block 间距bug

<div class="alert-action">
    <a class="btn-cancel" onclick="alert_hide()">取消</a>
    <a class="btn-confirm" onclick="alert_hide()">发送</a>
</div>

<style>
.alert-action{width:100%;/* height:40px; */line-height: 40px;text-align: center;}
.alert .btn-cancel,.alert .btn-confirm{height:100%;display:inline-block;width:50%;}
.alert .btn-cancel{background:#f4f4f4;color:#333;}
.alert .btn-confirm{background:#2196f3;color:#fff;}
</style>

结果悲剧了：

解决方案：（方法很多，仅列举3个常用的）
1.display:inline-block元素间不留空格

2.借助HTML注释，注释掉空格

3.简单粗暴的font-size:0也可解决;

---

firefox浏览器table表格边框颜色修改不了
如果是如下形式的html 和 css：

<style>
    table{border:1px solid #ddd;margin:30px auto;width:80%;text-align:center;border-collapse:collapse;}
</style>
<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

你会发现，火狐浏览器下表格的边框颜色仍然是黑色：

据上图可以看出，表格内部的样式是由td决定的，因此给td加上样式即可解决：

table td{border:1px solid #ddd;}