文档章节

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

sand_ant
 sand_ant
发布于 2016/06/21 16:38
字数 722
阅读 32
收藏 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会匹配之而不是去匹配第一个子元素。

© 著作权归作者所有

共有 人打赏支持
sand_ant
粉丝 3
博文 35
码字总数 18706
作品 0
无锡
前端开发常见问题精选(二)

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

璿而不华
2017/09/24
0
0
关于 TinyMCE 的一些常见问题

兼容性表 支持的浏览器 TinyMCE 使用高级的 JavaScript 试图尽可能智能化地适应不同浏览器,主要重点放在了 Microsoft Internet Explorer 和 Mozilla/Firefox 上。下面的表格只包括了我们自己...

红薯
2009/11/24
3.1K
2
web页面 float定位导致“溢出现象”处理

<ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li></ul><p>a,b,c,b.e,e,g,h,i</p> >>>>如果让上面的列表成为web页面上水平排列的导航菜单,那么,需要使用CSS各种处理,......

IamOkay
2014/10/28
0
0
20个增强网页兼容性设计的实用工具分享

互联网时代,人们利用各种设备上网:笔记本电脑、上网本、平板电脑、智能手机,甚至电视机。这些设备的屏幕和问题解决方案都各不相同,因此很难创建一个适用于所有设备的网站。 不过,还是有...

小编辑
2011/11/11
3.2K
1
基于 Flex 的 UI 框架--mzui

MZUI 为移动端设计,基于 Flex 的 UI 框架。 示例和文档:http://zui.sexy/m/ 特色 现代化:基于 Flex 设计,支持移动端全部主流浏览器,支持 Android 微信内置浏览器; 灵活:独立的外观选项...

开源春哥
2016/07/14
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx的简单使用:负载均衡

nginx:反向代理的服务器;用户发送请求到nginx,nginx把请求发送给真正的服务器,等待服务器处理完数据并返回,再把数据发送给用户。 nginx作为一个反向代理服务器,能缓存我们项目的静态文...

osliang
14分钟前
1
0
网站title标题被改并被百度网址安全中心提醒的解决办法

国庆假日期间我们Sine安全接到众多网站站长求助网站标题被改导致在百度搜索中百度安全中心提醒被拦截,导致网站正常用户无法浏览网站被跳转到一些菠菜du博网站,而且很明显的一个特征就是在百...

网站安全
16分钟前
1
0
JDK版本与major.minor version的对照关系

其实,只需要记住jdk6对于major.minor version 50即可,其他版本自行计算即可。 ---------------------

码代码的小司机
18分钟前
1
0
Gitlab安装

具体步骤如下: sudo yum install -y curl policycoreutils-python openssh-server cronie sudo lokkit -s http -s ssh sudo yum install postfix sudo service postfix start sudo chkconfi......

很好亦平凡ms
26分钟前
1
0
C++基础教程面向对象学习笔记及心得感悟[图]

C++基础教程面向对象学习笔记及心得感悟[图] 使用友元函数重载算术运算符: C ++中一些最常用的运算符是算术运算符 - 即加号运算符(+),减运算符( - ),乘法运算符(*)和除法运算符(/...

原创小博客
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部