Css 浏览器兼容性及其其他常见问题
博客专区 > sand_ant 的博客 > 博客详情
Css 浏览器兼容性及其其他常见问题
sand_ant 发表于1年前
Css 浏览器兼容性及其其他常见问题
  • 发表于 1年前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: css对于不同版本浏览器的兼容性问题,和一些其他问题

CSS

IE10~11 透明滚动条

透明滚动条不占空间,显示时会覆盖内容

//--如下样式使滚动条变为普通样式
body {
   /* ... */
    -ms-overflow-style: scrollbar;
}

IE10~11 输入框多个叉号

点击叉号会清空输入框内容,会覆盖自己定制样式,可能不会富客户端框架的一些事件 input::-ms-clear { display: none; }

IE8 背景透明时无法响应事件

IE8以下的浏览器bug,背景透明的元素无法点击(实际点击的是其底层的元素)
对需要透明的div添加背景图片,图片为透明的png

IE8 png图片有黑色边框

PNG的支持问题在于IE7及以上版本使用了filter来支持PNG的Alpha通道,
所以对于PNG来说其实已经偷偷被应用了一个 filter了。
虽然解决了主要的PNG透明问题,不过也伴随着另一个副作用,就是不能再应用其他filter。
或者准确地说是应用其他filter会破 坏IE对PNG的支持。这就是为什么PNG在渐隐和渐现的时候会有难看的黑边。

IE8 不支持background-size属性

如果必须做背景拉伸,可以添加一个100%的div,并添加一个img图片,设置div的z-index为负数

IE8下A标签的文字无法响应拖动事件

IE8不支持A标签意外的标签的:hover伪类

如果使用了,可能但不一定导致渲染问题

IE6~IE7 float:right换行

将需要浮动的元素放到不浮动的元素前定义

IE7 下div设置了margin-left,直接子元素input添加margin-left空隙为两个的和

div设置了margin-left,直接子元素input 使用margin-left时会有间隙会是两个的和, 解决方案为在input外包一层span

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .contant{
        background-color: gray;
        width: 100%;
        height: 200px;
        margin-left: 100px;
    }
    .contant input{
        margin-left: 100px;
    }
</style>

<div class="contant">
    <input type="text" />
</div>

div无法覆盖Object引入的浏览器插件(视频/weboffice等)

可以在需要覆盖插件的弹出层中添加一个iframe,iframe大小为此div的带下,z-index设为负数

<div class='msg_mask'><iframe src=\"javascript:''\" style=\"position: absolute; visibility: inherit; border: 0px; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe></div>

css的disabled选择器

input:disabled IE8-不支持
input[disabled] IE6-不支持,但是IE7~IE8支持
IE9及以下disabled选择器无法改变字体颜色。

:first-child IE7问题

 IE7 会将一个注释或者文字节点当成first-child,而不是只有元素才是“子”元素。所以,如果在第一个子元素前有注释或文字,IE7会匹配之而不是去匹配第一个子元素。
共有 人打赏支持
粉丝 4
博文 35
码字总数 18706
×
sand_ant
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: