css 兼容性问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 兼容性问题相关的知识，希望对你有一定的参考价值。
参考技术A1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
解决办法：给所有网页添加如下样式
说明：
-webkit-overflow-scrolling: touch; 当手指从触摸屏上移开，会保持一段时间的滚动
-webkit-overflow-scrolling: auto; 当手指从触摸屏上移开，滚动会立即停止
2. css 苹果手机按钮默认样式如何去掉
input[type="button"], input[type="submit"], input[type="reset"] -webkit-appearance: none;
textarea -webkit-appearance: none;
3. 如果还有圆角的问题，
** 4.苹果手机不支持box-shadow属性**
如果先给input写边框，用 border:1px solid #ccc;
5、去除Chrome等浏览器文本框默认发光边框
6.去掉高光样式：
当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。
7、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了
input::-ms-clear display: none;
8.H5页面写出来，在chrome中出现如下错误，只需添加如下css即可解决
*touch-action: pan-y;
CSS常见问题及兼容性
CSS常见问题
1 （IE6，7）H5标签兼容
解决方法1：（只显示核心代码）
1<script>
3 document.createElement("header");
4 document.createElement("section");
5 document.createElement("footer");
6 </script>
7
8 <style>
9 //由于它默认的是不识别的，所以把这个标签理解为自定义标签，自定义标签默认就是内联元素，内联元素不支持宽高，所以我们要将其转换成块元素——display:block
10 header{width:200px;height:200;display:block;background:red;}
11 section{width:400px;height:400;display:block;background:green;}
12 footer{width:200px;height:200;display:block;background:red;}
13 </style>
14
15 <body>
16 <header>header</header>
17 <section>section</section>
18 <footer>footer</footer>
19 </body>
解决方法2：引入html5shiv.js插件
2 元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，就给它里边的块元素加上浮动
解决方案：需要谁去浮动，就把浮动加给谁
<style>
width:400;
border:1px soild black;
overflow:hidden;//清浮动，仅为了演示，不是最好的方法
}
.left{
float:left;
background-color:red;
}
.right{
float:right;
background-color:green;
}
h2{
float:left; //解决方案：需要谁去浮动，就把浮动加给谁
margin:0;
height:30px;
}
</style>
<body>
<div class="box">
<div class="left>
<h2>left</h2>
</div>
<div class="right>
<h2>right</h2>
</div>
</div>
3 第一块元素浮动，第二块元素加margin值等于第一块元素 在IE6下会有间隙问题
解决方案：1 不建议这么写 2 如非要这样写，建议用浮动解决，不用margin
body{margin:0;}
.box{width:300px;}
.left{
width:200px;
height:200px;
backgrong-color:red;
float:left;
}
.right{
width:200px;
height:200px;
backgrong-color:blue;
// margin-left:200px;
float:left;//解决方案：用浮动解决
}
<body>
<div class="box>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
4 IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：不要让子元素的宽高超过父级
.box{
width:200px;
height:200px;
border:10px soild #000;
}
//解决方案，不要让子元素的宽高超过父级，即content的width<box的width
.content{
width:400px;
height:400px;
background-color:red;
}
</style>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
5 p 包含块元素嵌套规则
注意：<p>,< td >,<H1-H6>这三个标签不能嵌套块元素
CSS兼容性问题
1 margin兼容性问题
2 display:inline-block
3 IE6最小高度问题
4 IE6双边距
5 li里元素都浮动 li在IE6,7下方会产生4px间隙问题
6 浮动元素之间注释，导致多复制一个文字问题
7 IE6,7父级元素的overflow:hidden是包不住子级的relative
8 IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和buttom值会有1px的偏差
9 IE6下绝对定位元素和浮动元素并列绝对定位元素消失
10 IE6下input 的空隙
11 IE6下输入类型表单控件背景问题
以上是关于css 兼容性问题的主要内容，如果未能解决你的问题，请参考以下文章