html浏览器影响js问题,从html,css,javascript三方面谈谈“浏览器兼容性”的问题

最新推荐文章于 2023-09-10 16:49:03 发布

HAYner

最新推荐文章于 2023-09-10 16:49:03 发布

阅读量127

点赞数

文章标签： html浏览器影响js问题

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

*{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

IE 条件注释

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

bVbhHVn?w=911&h=280

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

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

bVbhHVD?w=600&h=129

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