文档章节

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

sand_ant
 sand_ant
发布于 2016/06/21 16:38
字数 722
阅读 31
收藏 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
切图框架 Slicy 发布 1.3 版本

Slicy 1.3 发布了。该版本最大的变化在于添加了字体图标的支持,基于 CSS3 属性 @font-face 使用自定义字体,这是让前端工程师拍手称赞的一件事情。在 CSS3 之前,前端页面的字体只能使用设备...

qietuwang
2016/08/19
1K
2
ComponentOne ASP.NET Wijmo 控件管理器

Wijmo 控件管理器 观察Studio for ASP.NET Wijmo的运行过程可发现,它管理着所有Studio for ASP.NET的新UI控件。简单的选择一个左边面板上的控件,就可以查看它内置的特性和功能。您可以改变...

葡萄城控件技术团队
2014/07/21
842
0
css实现水平居中和垂直居中及其浏览器兼容性

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

黄梦巍
2013/08/08
0
0
关于 TinyMCE 的一些常见问题

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

红薯
2009/11/24
3.1K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
1
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部