浏览器兼容性问题解决方案 · 总结

普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。

贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。

不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.css

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">复制代码

简单粗暴法

* { margin: 0; padding: 0; }复制代码

解决 ie9 以下浏览器对 html5 新增标签不识别的问题。

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->复制代码

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>复制代码

解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>复制代码

IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效

针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制

image

image

-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句复制代码

很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。

正确的a标签顺序应该是：==love hate==

<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *';}">复制代码

.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }复制代码

当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;

<div class="box" id="box">
  <p>Lorem ipsum dolor sit.</p>
  <div style="overflow: hidden;">
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <p>Lorem ipsum dolor sit.</p>
</div>复制代码

设置 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题

display: inline;复制代码

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);复制代码

/* IE6 hack */
*html, *html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}
*html #menu {
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}复制代码

问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载

解决：可以用 JavaScript 设置 ie6 缓存这些图片：

document.execCommand("BackgroundImageCache", false, true);复制代码

日期<span> 标签放在标题 <a> 标签之前即可

min-height: 350px;
_height: 350px;复制代码

flexbox布局模块是css3新增的一些属性，这些属性分为容器属性和条目属性，容器和条目是这种模块里面的概念，指的其实就是父元素和子元素。还有像更加灵活的box模型，一个div宽度很小，下一个div会接在这个div下面，通过更加灵活的box模型可以做布局，可以使用竖直方向编编列，到容器有富裕宽度这些子和模型能不能做自动扩张或者压缩，一定要注意就是所有的模型增强属性，应用一定要在前面加上指定为box类型，浏览器时限不一样，必须要加上前缀，这样的属性，才能让下面这些属性能够工作，否则这些属性是没有用的，上面没有的话。 、 、 、 、 begin 、end ：获得容器首、尾迭代器 clear ：将容器清空 empty ：判断容器是否为空 size ：得到容器元素个数 s1.swap s2 ：将s1和s2两容器内容交换 相关数据类型（s表示容器类型） s::iterator：指向容器元素的迭代器类型 s::const_iterator：常迭代器类型 容 器 可逆容器、随机访问容器 可逆容器 s::reverse_iterator：逆向迭代器类型 s::const_reverse_iterator：逆向常迭代器类型 rbegin ：指向容器尾的逆向迭代器 rend ：指向容器首的逆向迭代器 随机访问容器 s[n]：获得容器s的第n个元素 * 容 器 * 顺序容器 顺序容器的接口 赋值 assign 插入函数 insert， push_front（只对list和deque）， push_back 删除函数 erase，clear，pop_front（只对list和deque） ，pop_back 其他顺序容器访问函数 front，back 改变大小 resize 顺序容器 例10-4 * 顺序容器 //包含的头文件略去…… template void printcontainer const char* msg, const t& s cout msg ": "。

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}复制代码

问题：在ie 中 img 与文字放一起时，line-height 不起作用

解决：都设置成 float

width:100% 这个东西在 ie 里用很方便移动浏览器兼容性问题，会向上逐层搜索 width 值，忽视浮动层的影响.

Firefox 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。

opera 这点倒学乖了移动浏览器兼容性问题，跟了 ie

显示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持

cursor: pointer;复制代码

问题：table 宽度固定，td 自动换行

fixed的时候 不管你对td设置什么样式padding什么的。测试人员查询状态为fixed的bug，然后验证bug是否已解决，如解决，置bug的状态为closed，如没有解决,置bug状态为reopen。设置optionseh属性 中fixed, frozen, footer 和 data rows等属性表格外观为3d效果，设置flat为true则为平面外观效果.。

想让层的内容显示在 flash 上，把 FLASH 设置透明即可

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-114958-1.html