浏览器兼容【样式在部分浏览器中正常显示，部分不正常显示】

最新推荐文章于 2022-06-27 16:29:38 发布

司空代涵

最新推荐文章于 2022-06-27 16:29:38 发布

阅读量6.8k

点赞数 2

分类专栏：兼容

本文链接：https://blog.csdn.net/u010127996/article/details/50973723

版权

兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

IE中错误显示：

1.属性之间的空格会使得界面出现错误【如：<li style=""></li>会识别成<li  style=""></li>】 —— 多打了一个空格

2.<body>标签

①body标签中书写的样式，ie7中无法显示

②body标签中不能使用z-index：-1；（不能为负数）

3.在使用绝对位置时，应将left:0px;等写完整否则ie7会出错

4.清除浮动

     <ul><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><li style="float:left;"></li><div style="clear:both"></div></ul>
                <!--想要实现 在ie7中正常显示 需要在ul后面加上以下内容-->
                <div style="clear:both"></div>
                <!--想要实现 在ie7中正常显示 需要在ul后面加上以上内容-->
                <p></p>

5.ie7图片下多余空白

解决方案：设置“font-size:0;”

6.ie7、ie8中的input 内容会显示在输入框的顶端（无法居中）

解决方案：添加line-height，并将其高度设为文本框

7.ie 里面margin:0 auto；失效

解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

8.在ie8及以下背景图片未成功显示

当写backgound:url(xxx.png) center cener...;之类代码时， png)后面需打上空格，否则背景图片将无法在ie8及以下界面中显示

IE6/Chrome/safari中错误显示：

1.IE6/Chrome/safari背景图片居中【background:url(xxx.png) center top;】图像会出现1px偏移

①Chrome浏览器：多次对比就是当页面宽度大于背景图宽度且页面宽度为奇数时，内容区域向左偏移1px（这个就很没节操只是偶尔显现，大部分时间没出现）；当页面宽度小于背景图宽度且页面宽度为奇数时，内容区域向右偏移1px（这种现象是必现的）。

②IE6浏览器：只有当页面宽度大于背景图片宽度且页面宽度为奇数尺寸时才会出现内容区域向左偏差1px的现象。

解决方案：
中间掏空的那种背景图可以掏空的时候比内容区左右各少1px

IE正常，Firefox和Chrome无法正常显示:

1.$(window).height()在firefox和chrome中获取的是整个页面的高度(body),IE中获取的是当前可视窗口的高度

说明：

$(window).height()//获取当前可视窗口的高度

解决方案：

将html头部

<html>

换成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">