html5属性浏览器不能用,从html,css,javascript三方面谈谈“浏览器兼容性”的问题

拼搏现实的明天。 2022-10-06 08:57 158阅读 0赞

不同浏览器的标签默认的外补丁和内补丁不同

\*\{margin:0;padding:0;\}

css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

IE的条件注释hack：

块属性标签float后，又有横行的margin情况下，在IE6显示 margin比设置的大，IE6中后面的一块被顶到下一行

在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug,IE6里的间距比超过设置的间距

在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

设置较小高度标签(一般小于10px)，在IE6，IE7，遨游中高度超出自己设置高度

问题：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

图片默认有间距

使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距

IE6下图片的下方有空隙

给img设置display:block;

IE6下两个float之间会有个3px的bug

给右边的元素也设置float:left;

IE6下没有min-width的概念，其默认的width就是min-width

min-height: 350px;

\_height: 350px;

标签最低高度设置min-height不兼容

如果我们要设置一个标签的最小高度200px，需要进行的设置为：\{min-height:200px; height:auto !important; height:200px; overflow:visible;\}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

IE6下在使用margin:0 auto;无法使其居中

为其父容器设置text-align:center;

被点击过后的超链接不再具有hover和active属性

按lvha的顺序书写css样式

link:平常的状态

visited:被访问过之后

hover:鼠标放到链接上的时候

active:链接被按下的时候

在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

IE6下无法设置1px的行高，原因是由其默认行高引起的

为期设置overflow:hidden;或者line-height:1px;

浏览器 CSS 兼容前缀

\-o-transform:rotate(7deg); // Opera

\-ms-transform:rotate(7deg); // IE

\-moz-transform:rotate(7deg); // Firefox

\-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

完美解决 Placeholder

清除浮动 最佳实践

.fl \{ float: left; \}

.fr \{ float: right; \}

.clearfix:after \{ display: block; clear: both; content: ""; visibility: hidden; height: 0; \}

.clearfix \{ zoom: 1; \}

解决边距重叠问题

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

overflow: hidden;

Lorem ipsum dolor sit.

IE9 以下浏览器不能使用 opacity

opacity: 0.5;

filter: alpha(opacity = 50);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题

/\* 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');

IE6 背景闪烁的问题

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

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

document.execCommand("BackgroundImageCache", false, true);

解决在 IE6 下，列表与日期错位的问题

日期 标签放在标题 标签之前即可

![bVbhHVd?w=710&h=595][bVbhHVd_w_710_h_595]

IE 条件注释

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

![bVbhHVn?w=911&h=280][bVbhHVn_w_911_h_280]

IE 属性过滤器(较为常用的hack方法)

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

![bVbhHVD?w=600&h=129][bVbhHVD_w_600_h_129]

![bVbhHVO?w=600&h=296][bVbhHVO_w_600_h_296]

让 IE7 IE8 支持 CSS3 background-size属性

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

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');

IE6-7 line-height 失效的问题

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

解决：都设置成 float加粗文字

width:100%

width:100% 这个东西在 ie 里用很方便，会向上逐层搜索 width 值，忽视浮动层的影响.

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

opera 这点倒学乖了，跟了 ie

cursor:hand

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

cursor: pointer;

td 自动换行的问题

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

解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word

让层显示在 FLASH 之上

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

1、

2、

[bVbhHVd_w_710_h_595]: https://segmentfault.com/img/bVbhHVd?w=710&h=595
[bVbhHVn_w_911_h_280]: https://segmentfault.com/img/bVbhHVn?w=911&h=280
[bVbhHVD_w_600_h_129]: https://segmentfault.com/img/bVbhHVD?w=600&h=129
[bVbhHVO_w_600_h_296]: https://segmentfault.com/img/bVbhHVO?w=600&h=296