css兼容性问题集
来源:互联网 发布:淘宝修改送货地址 编辑:程序博客网 时间:2024/06/08 14:47
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;}
0 0
- css兼容性问题集
- css兼容性问题
- css兼容性问题
- CSS兼容性问题
- CSS兼容性问题
- CSS兼容性问题
- css兼容性问题
- css兼容性问题
- css 兼容性问题
- CSS浏览器兼容性问题详解
- CSS 跨浏览器兼容性问题
- div+css兼容性问题
- CSS常见兼容性问题
- DIV+CSS兼容性问题总结
- CSS兼容性问题referer
- 常见的CSS兼容性问题。
- css hack兼容性问题
- css解决浏览器兼容性问题
- PHP加速器eAccelerator安装
- socket函数详解
- mysql操作
- Python之操作Excel文件
- hdu 5185 Equation(DP,思路)
- css兼容性问题集
- 正则替换java字符串中的中括号
- Android and js
- 02-java-关键词-变量-类型
- Android实现自动填充短信验证码
- 编码规范(一)
- HTML 引用资源路径整理
- opencv-图像修补,图像修复,inpaint
- 从事C和C++开发者快速学python(四)