search

eniac0001 / workrole

Issue collection of everything
1 stars 0 forks source link

CSS 兼容性问题集锦 #19

Open eniac0001 opened 10 years ago

eniac0001 commented 10 years ago

1、DIV 水平居中

具体描述：

div 要水平居中，只需设置 margin-left: auto; margin-right: auto; 而在IE 9以下版本中不行；

解决办法：

需设置 div 父级元素：text-align: center;

eniac0001 commented 10 years ago

2、IE 6 问题

具体描述：

（1）双倍间距问题：当容器设置浮动后，IE 6中 margin-left 或 margin-right 会加倍； （2）DIV 等非 A 标签 hover 样式在IE 6下无效； （3）PNG 图片透明问题；

解决办法：

（1）设置容器样式，display: inline； （2）在CSS 1中，hover 伪类仅作用于 A 对象，且有 href 属性；在CSS 2中，可以应用于任何对象。但目前 IE 6 仅支持CSS1中的 :hover。但在 IE 6 中，使用CSS 1用 A 标签模拟，在IE 6解析时存在bug。此bug 可以通过在 A 链接的属性中（a:hover {}）增加某些特殊的 CSS 属性声明来消除（ text-decoration，color，z-index 除外，不建议使用 display）。

eniac0001 commented 10 years ago

3、A 链接相关问题

具体描述：

（1）被点击访问过的 A 链接不在具有 hover 和 active 样式； （2）链接在被点击时会出现虚线框；

解决办法：

（1）改变 A 链接样式的设置顺序，LINK -> VISITED -> HOVER -> ACTIVE； （2）IE 下：在 A 标签的结构中加入hidefocus="true"属性；FF 下：定义样式 outline: none；

eniac0001 commented 10 years ago

4、BOX 模型差异

具体描述：

IE 和 FF 等浏览器在盒模型上存在差异；

eniac0001 commented 10 years ago

5、CSS 默认样式问题

问题描述：

（1）UL 标签：在FF中默认有 padding 值，在IE中默认有 margin 值； （2）重复书写默认样式，比如块级元素的 height 默认值几乎都为 auto，没有必要添加：height: auto；body、p、h1~6 等元素 padding 的默认值为 0，无必要添加 padding: 0，只写 margin 即可；行内元素如 span、em 等更无需 padding 和 margin； （3）无用的样式：比如样式为 inline 的元素对 height、width、clear、margin-top、margin-bottom、vertical-align、overflow 等样式无效；block 水平的元素对 vertical-align 属性没有作用； （4）多余的样式：例如对于 a 或 span 标签，没有任何理由使用display+float的组合，因为 float 所产生的“包裹”作用已经让元素如同一个inline-block水平的元素，这种作用大于直接的display设置；仅仅一种情况下有必要使用display+float的组合，就是block水平的元素在 IE6 下的双边距bug问题，这种情况的唯一写法就是display:inline; float:left; margin-left:3px; 一定要有与float浮动同方向的margin值，否则display:inline是多余的，可以直接去掉； （5）多余的样式：div{height:25px; line-height:25px;} 这段代码高度与line-height值一致，通常作用是实现单行文字的垂直居中显示。但是实际上，很多情况下，这里的height是个多余的值，尤其在模块标题处。对于单行文字而言，您设置line-height多大，其实际占据的垂直高度就是多高，没有任何的兼容性问题，可以放心使用。但是，有时候这里的height值是有必要的，什么时候呢？就是IE6/7清除浮动影响的时候，IE6/7下设置height值可以让元素haslayout从而清除浮动的影响，而line-height无此作用，还有就是其他一些需要layout的情况。

解决办法：

（1）UL 标签：预先定义 UL {margin: 0; padding: 0;}； （2）UL 和 OL 的样式应写为：{list-style: none; margin: 0; padding: 0;}； （3） ~~； （4） ~~； （5） ~~；

eniac0001 commented 10 years ago

6、文本问题

问题描述：

（1）文字高度兼容问题：对于font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px；

解决办法：

（1）文字高度兼容问题：给文字设定 line-height 值；

eniac0001 commented 10 years ago

7、容器高度设定问题

问题描述：

（1）容器设定 height，容器边框确定，不会被内容撑大；而 IE 下会被内容撑大，高度限定失效；

解决办法：

（1）不限制 height，或者限制内容；

eniac0001 commented 10 years ago

8、横向内容撑破容器问题

问题描述：

如果 float 容器未定义宽度，FF 下内容会尽可能撑开容器宽度，IE 下则会优先考虑内容折行；

解决办法：

内容可能撑破的浮动容器需要定义width；

eniac0001 commented 10 years ago

9、清楚浮动

问题描述：
解决办法：
eniac0001 commented 10 years ago

10、定位问题

问题描述：

（1）IE 下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效； （2）IE 6支持overflow-x或者overflow-y的特性，IE 7、FF不支持。

解决办法：

（1）给 overflow:hidden 层加 position:relative 或者 position:absolute； （2）~~；

eniac0001 commented 10 years ago

11、CSS Hack 区分浏览器（不建议）

问题描述：

针对 IE 6、IE 7、FF 特殊的 CSS 写法；

解决办法：
// IE 6 不能识别 !important
h2{
    color: #f00; // 所有浏览器识别
    color: red\9; /* all IE */
    color: red\0; /* IE 8 */
    *color: #0f0; /* IE 7, IE 6  */
    +color: #0f0; /* IE 7 */
    _color: #00f; /* IE 6 */
}
:root h2 {
    color: red\9; /* IE 9 */
}
eniac0001 commented 10 years ago

12、IMG 相关问题

问题描述：

（1）3px bug：IMG 下边或右边有缝隙；

解决办法：

（1）方法一：让 IMG 紧跟标签，如

； 方法二：IMG 设置 display: block； 方法三：父元素设置 font-size: 0； 方法四：为 IMG 设置 vertical-align 属性，值可以是: top | bottom | text-top | text-bottom （其他值效果不好或没有效果）。 如果图片的父元素是内联元素的话，方法三和方法四扔有 bug；