风动之石的博客

CSS 兼容性

background-size: 100% auto; 导致 background-repeat 属性失效

部分华为浏览器，以下的代码将不起作用。其直接表现为设置background-size: 100% auto;会导致background-repeat属性失效。

div {
    background: #FFE6AE url('...') top left/100% repeat-y;

    /* 或 */
    background: #FFE6AE url('...') top left repeat-y;
    background-size: 100% auto;
}
1
2
3
4
5
6
7

解决办法：background-size的第二个参数不能使用auto，可使用1px代替，即background-size: 100% 1px。

div {
    background: #FFE6AE url('...') top left/100% 1px repeat-y;
}
1
2
3

flex 兼容性问题

flex-basis

flex-basis的默认值是auto。

但是在 iOS 10.2 及以下版本，flex-basis的默认值为0。

Reference: flex:1在iOS10.2导致flex-wrap 不起作用open in new window

rem 在 Android APP 的 webview 计算不准确的问题

Reference: rem布局在webview中页面错乱open in new window

前置信息:

  • 内嵌在 APP 里面的 H5 页面
  • 使用rem作为单位
  • html元素的font-size设置正常
  • 系统浏览器和绝大部分手机上，正常显示
  • 在某些手机上，页面元素变大了（或变小了），调试后发现是rem计算成px时不准确导致

结论:

  • 手机系统设置了字体大小，导致 APP 里 webview 里的默认字体大小偏大或偏小。将系统字体设置为“正常”即可解决问题。
  • 若想要在用户设置了系统字体大小之后仍能正常显示，可参考 Reference 里的解决方法。

小于 12px 字体使用 line-height 属性垂直居中偏上的问题

问题描述：Android 浏览器文本垂直居中问题open in new window

方案一：scale

<span class="content">测试文本</span>
1
.content {
  display: inline-block;
  height: 40px;
  background-color: gray;
  line-height: 40px;
  font-size: 20px;
  transform: scale(0.5);
  transform-origin: 0% 0%;
}
1
2
3
4
5
6
7
8
9

该方法存在的问题是：元素原先占据的空间不会因为scale(.5)而改变。

方案二：table-cell

<div class="container">
  <span class="content">testtesttesttesttest</span>
</div>
1
2
3
.container {
  display: table;
}
.content {
  background-color: gray;
  font-size: 10px;
  display: table-cell;
  vertical-align: middle;
}
1
2
3
4
5
6
7
8
9

该方法的缺点是：内容标签外部增加了一层标签

方案三：伪元素 + vertical-align: middle

<span class="content">测试文本</span>
1
.content::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  margin-top: 1px;
}
1
2
3
4
5
6
7
8

原理：伪元素设置了vertical-align: middle;之后，伪元素（行内元素框）会与父元素基线上方0.5ex处的一个点对齐。

PS：大多数用户代理都把1ex处理成0.5em。

IE

IE6~8 CSS hack

版本\hack_*\0\9
IE 6√√×√
IE 7×√×√
IE 8××√√

各类写法如下：

.test {
    _color:#FF0000;         /*仅 IE6支持 */
    *color:#FFFF00;          /* 仅 IE6、7支持 */
    color:#0000FF\0;       /* 仅 IE8支持 */
    color:#0000FF\9;       /* 所有IE浏览器(IE6+)支持 */
}
1
2
3
4
5
6

更详细的信息见：http://blog.csdn.net/freshlover/article/details/12132801open in new window

IE6 float 换行

在浮动元素上添加如下代码

  • display: inline-block;
  • overflow: hidden;

IE6 a:hover 问题

原因：是ie6对a:hover子标签的解读是建立在父标签的hover设置上的，换句话说如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读

比如

<a href ="#">鼠标经过时改变我的<em>颜色</em></a>
1
a:hover em {
  color:#F00;
}
1
2
3

上述代码不会生效。需改成 （只要存在 a:hover {} 即可，不管里面是什么规则）

a:hover {zoom: 1;}
a:hover em{color:#F00;}
1
2

参考文档：http://www.jb51.net/css/149472.htmlopen in new window

IE6~8 a 超链接被击穿问题

描述：当用超链接 a 绝对定位在某个元素 ele（内含图片或者文字）上时，超链接 a 会被击穿，鼠标放在 ele 上的图片或者文字上时，超链接无效，并且无法跳转。

解决方案：设置超链接的背景（不能为transparent），然后通过 filter 设置透明度。

IE6 多类选择器 bug（避免使用）

.first.second {}
.third.second {}
1
2

上述两句都只会应用的 .second 上，并且第二句会覆盖第一句

IE6 相对父容器绝对定位的bug

两种方法

  • 给父层设置zoom:1触发layout
  • 给父层设置宽度（width(定位left)/height(定位bottom)）

详见： http://blog.csdn.net/zhouyong0/article/details/6318485open in new window

IE6 固定定位

IE6不支持固定定位，但是可以依靠绝对定位和 JS 来模拟。具体代码为：

    var pos6 = function(){
        var scrollHeight = $(window).scrollTop();
        var bodyHeight   = $('body').height();
        floatwrap.css('top', (scrollHeight - 532) + 'px');
        floatwrap.css('right','-48px');
    };
    var ie6float = function(){
        if (!$.isIE6){
            return ;
        }
        floatwrap.css('display','block').css('position','absolute');
        pos6();
        var ie6timer;
        var _goPos = function(){
            floatwrap.css('display','none');
            clearTimeout(ie6timer);
            ie6timer = setTimeout(function(){
                floatwrap.css('display','block');
            },200);
            pos6();
        };
        $(window).on('scroll',function(){
            _goPos();
        });
        $(window).on('resize',function(){
            _goPos();
        });
    };
    ie6float();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

IE 6~8（9及以上没有测） 输入框内容高度兼容性问题

对于下面一段代码：phone-text是输入框，输入框 height + 上下pading + 上下border = 48

.phone-text {
    width: 180px;
    height: 40px;
    font-size: 24px;
    border: 2px solid #fd5c47;
    padding: 2px 5px;
    vertical-align: middle;
}
1
2
3
4
5
6
7
8

chrome下，会自动将输入的文字垂直居中

IE 6~8下：，不会将输入的问题垂直居中

将代码改成

.phone-text {
    width: 180px;
    height: 24px;
    font-size: 24px;
    border: 2px solid #fd5c47;
    padding: 10px 5px;
    vertical-align: middle;
}
1
2
3
4
5
6
7
8

IE 6、7下将 块级元素设置为 display: inline-block; 失效

解决方法：

{
    display: inline-block;

   /*在 display: inline-block 下面添加以下两个规则*/
    *zoom: 1;
    *display: inline;
}
1
2
3
4
5
6
7

IE 6 overflow: hidden; 失效

IE6 对 overflow 属性的理解有误，说白了是 IE6 的一个 bug，IE7 开始已经修复这个问题，也就是说IE7/IE8下 overflow: hidden; 可以清除浮动造成的影响-- 张鑫旭-对overflow与zoom”清除浮动”的一些认识open in new window

通用的清楚浮动的方法，在浮动元素的父元素上添加类：clearfix

.clearfix:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.clearfix {
    zoom:1
}
1
2
3
4
5
6
7
8
9
10

其他