文档章节

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

sand_ant
 sand_ant
发布于 2016/06/21 16:38
字数 722
阅读 31
收藏 1
点赞 0
评论 0

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

切图框架 Slicy 发布 1.3 版本

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

qietuwang ⋅ 2016/08/19 ⋅ 2

css实现水平居中和垂直居中及其浏览器兼容性

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

黄梦巍 ⋅ 2013/08/08 ⋅ 0

ComponentOne ASP.NET Wijmo 控件管理器

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

葡萄城控件技术团队 ⋅ 2014/07/21 ⋅ 0

关于 TinyMCE 的一些常见问题

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

红薯 ⋅ 2009/11/24 ⋅ 2

分享10款最棒的免费HTML5视频播放器

日期:2011/12/16 来源:GBin1.com 最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。 HTML5可以在没有f...

gbin1 ⋅ 2011/12/21 ⋅ 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

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

原文: #SmooshGate FAQ 作者:Mathias Bynens smoosh?!发生了什么?! 一项名为 JavaScript 功能的提案 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中...

justjavac ⋅ 03/20 ⋅ 0

20个增强网页兼容性设计的实用工具分享

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

小编辑 ⋅ 2011/11/11 ⋅ 1

基于 Flex 的 UI 框架--mzui

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

开源春哥 ⋅ 2016/07/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 47分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部