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的更多相关文章

  1. 几个很实用的BOM属性对象方法

    location对象 location.href-- 返回或设置当前文档的URLlocation.search -- 返回URL中的查询字符串部分.例如 http://www.dreamdu.com/ ...

  2. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

  3. 前端面试题-几个很实用的BOM属性对象方法?

    什么是Bom? Bom是浏览器对象.有哪些常用的Bom属性呢? (1)location对象 location.href-- 返回或设置当前文档的URL location.search -- 返回URL ...

  4. 分享几个很实用的CSS技巧对前端技术很有帮助

    创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...

  5. 不常用但是很实用的css记录

    本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一. 1.background-attachment  滚动视差    https://codepen.io/Chokcoco/p ...

  6. 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 ...

  7. 浏览器兼容性汇总--CSS篇

    目录 CSS篇 1.       cursor:hand   VS   cursor:pointer 2.        innerText在IE中能正常工作,但在FireFox中却不行 3.     ...

  8. Web开发中20个很有用的CSS库

    来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...

  9. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

随机推荐

  1. Java 实现字符串的加密与解密

    package com.wangbo.util; import java.security.Key; import java.security.Security; import javax.crypt ...

  2. 有没有人曾告诉你，你的SQL又报错了？[开发篇]

    引语:线上运行的真实环境总是变幻莫测,明明你在本地测试的时候各种情况都是OK得不要不要的,也许你还在为自己某个地方炫酷的效果以及神奇的设计感到激动不已!但是,到线上以后,他就会偶尔跟抽风一样的跟你sa ...

  3. [转]SQL SERVER整理索引碎片测试

    SQL SERVER整理索引碎片测试 SQL SERVER整理索引的方法也就这么几种,而且老是自作聪明的加入智能判断很不爽,还是比DBMS_ADVISOR差远了: 1SQL SERVER 2000/2 ...

  4. python实现stack并测试

    栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算. 这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新 元素放 ...

  5. Maven - 实例-3-自动创建Maven目录骨架

    archetype插件用于创建符合maven规定的目录骨架 方式一:根据提示设置相关参数 guowli@5CG450158J MINGW64 /d/Anliven-Running/Zen/Eclips ...

  6. PHP使用Zend Opcache之优化加速和缓存清理总结

    简介 字节码缓存不是php的新特性,有很多独立性的扩展可以实现缓存,比如PHP Cache(APC),eAccelerator,ionCube和XCache等等.但是到目前为止,这些独立的扩展并没有集 ...

  7. 物体检测，Error: maximum box coordinate value is too large

    使用ssd目标检测,出现error:maximum box coordinate value is larger than 1.100000: ] [1.325] 主要原因在于,用labelImg 标 ...

  8. linux中sed命令的使用

    sed命令是linux或者shell编程中常用的筛选.替换命令,如果能熟练使用sed则对经常使用的人来说在工作上是非常有帮助的 下面把sed主要的用法列出来(有错误的地方大家可以指正): p命令只打印 ...

  9. springboot + mybatis

    这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于spring boot ...

  10. matlab中数组的拼接

    matlab中,行拼接用逗号“:”,列拼接用分号“,”.示例如下: >> a=[1,2,3,4] 结果: a = 1 2 3 4 >> b=[1;2;3;4] 结果: b = ...