文档章节

Css 浏览器兼容性及其其他常见问题

sand_ant
 sand_ant
发布于 2016/06/21 16:38
字数 722
阅读 33
收藏 1

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会匹配之而不是去匹配第一个子元素。

© 著作权归作者所有

共有 人打赏支持
上一篇: JS_浏览器兼容
下一篇: was安装
sand_ant
粉丝 3
博文 35
码字总数 18706
作品 0
无锡
私信 提问
前端开发常见问题精选(二)

一、如何解决Canvas画布在移动端显示模糊的问题? Canvas画布在PC端显示正常,但是放在移动端却发现整个画布都有点模糊,其实这里有个比较简单的解决方法: 先给canvas标签的width和height这...

璿而不华
2017/09/24
0
0
如此招聘要求,在北京估计多少薪水能招到人?

后端: 1. 熟悉asp、php、asp.net其中一种,了解另外两种。 2. 熟悉mssql、mysql,及其存储过程、触发器、函数等; 3. 熟悉windows2003、IIS及以上版本 4. 熟悉Freebsd、apache、nginx等架设...

freejavaster
2010/08/19
1K
16
猎头职位 香港上市公司诚聘 Javascript Web前台开发工程师

彩票行业领先的香港上市公司,诚聘WEB前端网站开发工程师。 月薪8-10k+其他福利 工作地点:海淀 知春路 有兴趣可以发简历到:jack.xiao@careerelite.net, 或者加msn:xkjack@msn.com 欢迎朋...

hrjack
2010/07/26
258
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

果然,多看才会有长进 交互视频效果戳这里体验:http://t.cn/Rp01GKc 就是页面滚动的时候,列表会自动绕着iPhone X的刘海排列。 用了 CSS Shapes中有个CSS属性名为,可以让内联元素以不规则的...

红羊在厦门
10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么要学习Python?这10个理由足够了!

摘要: 看完这十个理由,我决定买本python从入门到精通! 如果你定期关注现今的科技发展,那么你可能想知道我为什么要写这篇文章告诉人们学习Python?因为几年前我提倡Java而不是Python。 在...

阿里云官方博客
21分钟前
2
0
spring服务方式配置okhttp3

问题 如果把OKhttp以Spring服务方式配置,就解决了从配置中心运行时刷新配置参数的问题。 OkHttpConfig.java package com.zyl.config;import okhttp3.OkHttpClient;import org.springfra...

亚林瓜子
21分钟前
2
0
8张图让你一步步看清 async/await 和 promise 的执行顺序

**摘要:**面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有。 为什么写这篇文章? 说实话,关于js的异步执行顺...

Fundebug
22分钟前
1
0
Linux 命令菜单

#!/bin/bash #menu.sh menu(){ source ~/.bashrc echo "=================================" echo "Please enter your choise:" echo "(0) Kill all java" echo "(1) Start all tomcat" echo......

mellen
27分钟前
3
0
原来云数据库也是有思想的...

本文由一刻talks发表 邵宗文,腾讯云数据库专家副总监。十余年数据库从业经验,2009年加入腾讯,曾负责腾讯网,新闻客户端,快报,视频,财经,体育等数据库平台部署、规划及运维支持工作。本...

腾讯云加社区
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部