浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline（适用范围：鼠标悬浮hover加外边框）
我们在布局的时候，常常会因为添加边框border影响宽高的布局。
那么，outline是完美的替代品，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性。所以，它不能在这两个浏览器中用于调试。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 500px;
margin: 50px auto;
list-style: none;
}
li {
width: 100px;
height: 100px;
background: #ececec;
float: left;
margin-right: 10px;
}
li:hover {
background: pink;
/*border: 2px solid red; */ /*border可以兼容到任何浏览器*/
outline: 2px solid red; /*outline只有IE6和IE7不支持此属性*/
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
2. first-child（第一个元素）、last-child（最后一个元素）、nth-child(*) （第*个元素） （适用范围：块级元素中有相同的元素）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 500px;
margin: 50px auto;
list-style: none;
}
li {
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
}
li:first-child {
background: pink;
}
li:last-child {
background: green;
}
li:nth-child(2) {
background: red;
}
li:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child的更多相关文章
- 几个很实用的BOM属性对象方法
location对象 location.href-- 返回或设置当前文档的URLlocation.search -- 返回URL中的查询字符串部分.例如 http://www.dreamdu.com/ ...
- 一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...
- 前端面试题-几个很实用的BOM属性对象方法?
什么是Bom? Bom是浏览器对象.有哪些常用的Bom属性呢? (1)location对象 location.href-- 返回或设置当前文档的URL location.search -- 返回URL ...
- 分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...
- 不常用但是很实用的css记录
本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment 滚动视差 https://codepen.io/Chokcoco/p ...
- css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]
css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...
- 浏览器兼容性汇总--CSS篇
目录 CSS篇 1. cursor:hand VS cursor:pointer 2. innerText在IE中能正常工作,但在FireFox中却不行 3. ...
- Web开发中20个很有用的CSS库
来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...
- Web 开发中 20 个很有用的 CSS 库
转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...
随机推荐
- Adobe Photoshop CC 2019画板背景色白底如何去掉？
Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...
- python 使用多线程进行并发编程/互斥锁的使用
import threading import time """ python的thread模块是比较底层的模块,python的threading模块是对thread做了 ...
- 顺藤摸瓜：一个专黑建筑行业的QQ黏虫团伙现形记
QQ粘虫是已经流行多年的盗号木马,它会伪装QQ登陆界面,诱骗受害者在钓鱼窗口提交账号密码.近期,360QVM引擎团队发现一支专门攻击建筑行业人群的QQ粘虫变种,它伪装为招标文档,专门在一些建筑/房产行 ...
- vscode 集成 cygwin 的注意事项
vscode 集成 cygwin vscode 现在是我的主力开发编辑器,它自带 terminal 不需要我各种切换,我还想要在 windows 下执行一些简单的 .sh 文件.所以,我希望有一款工具 ...
- MySQL 字符集utf8和utf-8的关系
目录 什么是字符集(character set) 校对规则(collation) ASCII码 Unicode国际化支持 UTF-8 utf8 utf8与utf8mb4的关系 超集 字符集设置 什么是 ...
- 自学vue笔记 (二) : 实例与生命周期
一: 什么是实例 我们说了,Vue 应用都应该从构建一个 Vue 实例开始.它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面.创建一个 Vue 实例,需要通过 ...
- druid的关键参数+数据库连接池运行原理
minEvictableIdleTimeMillis :连接保持空闲而不被驱逐的最长存活时间.(默认30分钟) Destory线程中如果检测到当前连接的最后活跃时间和当前时间的差值大于minEvi ...
- [Objective-C语言教程]预处理器（18）
Objective-C预处理器不是编译器的一部分,而是编译过程中的一个单独步骤. 简单来说,Objective-C预处理器只是一个文本替换工具,它指示编译器在实际编译之前进行必要的预处理. 我们将Ob ...
- mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案
1.无限滚动的运用场景: 一般运用在列表展示,有分页.下拉加载更多的需求中. 2.代码分析 代码很简单,实现了列表分页,数据加载完之后显示数据状态 <template> <div c ...
- .NET 动态向Word文档添加数据
本文章主要用于在网页上填写数据动态填入Word模板中使用 首先要准备一个Word模板,然后在需要插入数据的位置插入书签,这样可以确定在网页上填入的数据可以插入到Word文档相应的位置. 在项目中要声明 ...