在div中设置背景色：当border宽度很大时就要考虑一个问题，那就是背景的作用范围，是包括边框呢？还是不包括呢？很明显，又到浏览器产生分歧的时候了。

在IE中背景色的作用范围为：content+padding。而谷歌，火狐为content+padding+border。很明显，IE中的背景色范围是“局限”在边框内的，而谷歌，火狐则包括边框。

如代码：

<html>

<head>

  <title></title>

<style>

div{

width: 200px;

height: 200px;

background: red;

border:10px dashed blue;

}

</style>

</head>

<body>

 <div></div>

</body>

</html>

效果图示：IE中

Chrome，Firefox中

CSS中background背景色的作用范围的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  3. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  4. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  5. css中的背景色渐变以及背景图的定位

    单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...

  6. CSS中background样式的repeat和no-repeat

    自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识,特此感谢. <!DOCTYPE html> <html lang ...

  7. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  8. css中background和 background-color 同时使用的优先级

    给背景图片设置一个默认背景颜色,有以下两种方法: <style> .bg1{ background:url(http://debug.itxst.com/img/logo.png) red ...

  9. css中background合写样式

    body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; } 等价于 body ...

随机推荐

  1. [转]阎宏博士的JAVA与模式

    阎宏,1964年出生于天津市.1987年毕业于中国科技大学近代物理系,1990年于中科院理论物理所获硕士学位,1992年获博士学位,翌年赴日本京都大学进行博士后研究工作. 作者曾于美国花旗银行(Cit ...

  2. POJ 3519 Minimal Backgammon

    Minimal Backgammon Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 1195   Accepted: 700 ...

  3. ThoughtWorks 2016年第1期DNA活动总结

    今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...

  4. C#参考：Linq 概述

    Linq (Language Integrated Query,语言集成查询),是微软公司提供的一项新技术,它能够将查询功能引入到.NET 3.5 所支持的编程语言中,例如C#,Visual Basi ...

  5. js获取url参数值的方法

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...

  6. js判定IE

    var ie=!-[1,]; 这句话对于多数前端来说都很熟悉,遇到判定是否是ie浏览器就用这个,但是对于由来以及为什么可能没有深入了解过. 短短6个bytes就做了判定.这个表达式是利用IE和标准浏览 ...

  7. 【Machine Learning】机器学习の特征

    绘制了一张导图,有不对的地方欢迎指正: 下载地址 机器学习中,特征是很关键的.其中包括,特征的提取和特征的选择.他们是降维的两种方法,但又有所不同: 特征抽取(Feature Extraction): ...

  8. Flex Array 与 ArrayCollection.转自网络

    1.array作为控件使用 FLEX3写法: <mx:Array id="barname"> <mx:String>Flash</mx:String& ...

  9. LeetCode——Gas Station

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  10. CSS3魔法堂：背景渐变（Gradient）

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...