浏览器兼容性问题——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已经成为一大部分开发者和设计者的最爱,因为它提供 ...
随机推荐
- SQL Server使用证书最小粒度授权
最近在项目中某个功能遇到了阻塞造成的Time out错误.所以需要在执行该功能的时候开启一个线程检测SQL Server中阻塞会话.但是程序本身使用的sql帐号本身不具备VIEW Sever Stat ...
- PHP 生成验证码(+图片没有显示的解决办法)
今天有需要用到验证码,就敲了个,毕竟用途比较广,所以打算把代码留下来,以后肯定用得上的.当然,今天在做的时候也是有一些问题的,分享出来吧,记录自己所犯的错误,避免以后再掉坑里. 先给个效果图(下面的真 ...
- 你可能不知道的github语法——图标
概述 逛github,看到别人的仓库的description里面有各种炫丽的图标,不禁有点好奇,于是去查了下怎么写真的被我查到了,记录在下面,供以后开发时参考,相信对其他人也有用. 图标 可以先看看g ...
- Android 开发工具推荐
简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...
- saltstack 初始化LINUX系统
前面我们已经了解了saltstack的基础功能,现在就可以使用saltstack为初始化新安装的linux系统. 初始化列表: 1.关闭selinux 3.修改sshd配置文件 4.内核优化 5.ul ...
- Servlet-xml配置简介以及url-pattern简介
编写一个Servlet是需要实现Servlet接口,或者继承HttpServlet. 一个已经注册的Servlet可以被多次映射,如下图所示 或者多个url-pattern放在同一个servlet-m ...
- 【xsy1300】 原题的旅行 最短路+倍增
题目大意:有一个$n$个点,$m$条边的无向图,玩家走过第$i$条边,血槽中的血会下降$v_i$点,如果不足$v_i$点,这人会当场去世. 这$n$个点中,有若干个是关键点,在这些关键点可以将血槽补满 ...
- [EXP]Adobe ColdFusion 2018 - Arbitrary File Upload
# Exploit Title: Unrestricted # Google Dork: ext:cfm # Date: -- # Exploit Author: Pete Freitag of Fo ...
- 深入浅出分析MySQL MyISAM与INNODB索引原理、优缺点分析
本文浅显的分析了MySQL索引的原理及针对主程面试的一些问题,对各种资料进行了分析总结,分享给大家,希望祝大家早上走上属于自己的"成金之路". 学习知识最好的方式是带着问题去研究所 ...
- kubernetes入门之构建单机集群
1.kubernetes简介 kubernetes简称k8s,它是一个全新的基于容器技术的分布式架构方案,它是谷歌十几年来大规模应用容器技术的经验累积和升华的一个重要成果.如果我们的系统设计遵循了k8 ...