浏览器兼容性问题——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已经成为一大部分开发者和设计者的最爱,因为它提供 ...
随机推荐
- Nextday 参数化单元测试（测试用例）设计
一.首先简单描述一下下载试题及配置试题的过程 配置环境:安装Eclipse.JDK(1.7).及考试插件 (net.mooctest....*.jar)等: 登录系统:运行Eclipse: [Mooc ...
- openresty + lua 1、openresty 连接 mysql，实现 crud
最近开发一个项目,公司使用的是 openresty + lua,所以就研究了 openresty + lua.介绍的话,我就不多说了,网上太多了. 写这个博客主要是记录一下,在学习的过程中遇到的一些坑 ...
- [WINForm]C#应用程序图标设置问题
在屏幕分辨率大小不一的情况下,应用程序的图标有些电脑显示合适,有些电脑显示在图标中间出现过多空白边距: 处理方式: 1.在vs中打开ico图片 2.在图标空白处右键添加新图像类型 3.选择自己需要的尺 ...
- 实现instanceof关键字
如果用Java的伪代码来表现Java语言规范所描述的运行时语义,会是这样: // obj instanceof T boolean result; if (obj == null) { result ...
- java中微信统一下单采坑（app微信支付）
app支付前java后台统一下单文档:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1 微信支付接口签名校验工具:https ...
- Python函数学习——匿名函数
匿名函数 匿名函数就是不需要显式的指定函数名. 关键字lambda表示匿名函数,冒号前面的n表示函数参数,可以有多个参数. 匿名函数有个限制,就是只能有一个表达式,不用写return,返回值就是该表达 ...
- 【2019北京集训测试赛（七）】 操作 分治+FFT+生成函数
题目大意:你有$n$个操作和一个初始为$0$的变量$x$. 第$i$个操作为:以$P_i$的概率给$x$加上$A_i$,剩下$1-P_i$的概率给$x$乘上$B_i$. 你袭击生成了一个长度为$n$的 ...
- 【转】浮点数与IEEE 754
http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1. 什么是浮点数 在计算机系统的发展过程中,曾经 ...
- swaggerui集成oauth implicit
swaggerui集成oauth implicit 添加引用 Swashbuckle.AspNetCore IdentityServer4.AccessTokenValidation 预先准备好Ide ...
- CentOS 6.5静态IP的设置（NAT和桥接联网方式都适用）
不多说,直接上干货! 为了方便,用Xshell来.并将IP设置为静态的.因为,在CentOS里,若不对其IP进行静态设置的话,则每次开机,其IP都是动态变化的,这样会给后续工作带来麻烦.为此,我们需将 ...