在非 IE 浏览器中,默认情况下 width 属性指的是内容区域(content)的宽度。 
IE 6+ 中,如果浏览器以标准模型渲染,和非 IE 浏览器的表现是一致的;如果浏览器以怪癖模式渲染,则 width 指的是外 border 的宽度。

通常而言,网页头部添加了 <!DOCTYPE> ,则 IE 会以标准模式(或者接近标准)进行渲染,否则以怪癖模式渲染。

现代浏览器,包括 IE8 在内,都支持一个属性:box-sizing,这个属性,有两个可选值:border-box | content-box,普通元素默认情况下为 content-box。 
box-sizing: content-box; 的元素的 width 属性指的是边框的区域的宽度,正好和 IE 怪癖模式下的表现一致。于是,合理地使用 box-sizing: content-box; 在很多时候可以避免加加减减,或者额外添加新的一层元素。

对于 <input> 元素而言,box-sizing 默认情况下取值是 border-box 。也就是说,在 IE 8、Chrome 等浏览器中,你给 input 指定多少 width,它看上去就是多宽。(除非你的width太窄了)

max-width 和 min-width 就不多说了。

我的表单中有一个按钮,通常情况下为了美观需要固定一个宽度:

.button{
width: 260px;
}

但是由于网页需要用到多语言,有的文字可能很长,长到超出按钮的默认长度,所以改成下面的样式,当文字过长,按钮会自动拉长:

.button{
min-width: 260px;
}

其他浏览器中都没有问题,拿到 IE8 (最低支持 IE 8)中发现,按钮的长度好像变长了。用 Chrome 等查看,下面的黑色方块和按钮是一样宽的。而IE 8 下按钮要更宽。

.button{
padding: 8px 20px;
min-width: 300px;
}
 

IE8 里面看上去是什么样子呢?如果我们把按钮的 box-sizing 设为 content-box,在 Chrome 里面的表现,就是 IE8 里面看到的的样子。

因此,如果 IE 8 中元素宽度是 min-width 决定的,则浏览器直接忽略了 box-sizing: border-box

IE 8 下的 box-sizing 和 min-* 属性的更多相关文章

  1. C# LIstbox 解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”的问题

    解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”的问题 分类: winform2008-05-24 02:33 2592人阅读 评论(11) 收藏 举报 winf ...

  2. 解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”

    解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合” 最近更新: 2013-2-15    587   很少写WinForm程序第一次使用ListBox控件就遇到了比 ...

  3. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. Mac下Virtual Box Host-Only网络配置

    Mac下的虚拟机其实有很多,Parallels.VMware Fusion.Virtual Box都不错,Parallels是目前试过感觉最好的,Fusion装64位系统驱动支持似乎不完善,而且混合模 ...

  5. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  6. bundles.Add( )下无法绑定后缀为min.css的文件

    1.问题描述: 在绑定css的时候,除了后缀名为.min.css的文件,在render.style()不显示外,其他的css都正常加载, 2.解决办法: 这个是我在调试了几遍之后发现的规律,然后解决办 ...

  7. elasticsearch聚合操作——本质就是针对搜索后的结果使用桶bucket(允许嵌套)进行group by,统计下分组结果,包括min/max/avg

    分析 Elasticsearch有一个功能叫做聚合(aggregations),它允许你在数据上生成复杂的分析统计.它很像SQL中的GROUP BY但是功能更强大. 举个例子,让我们找到所有职员中最大 ...

  8. virtual box 安装centos min

    2018-4-19 22:20:40 星期四 之前不小心把用了很久的centos镜像删掉了.....这里记录下安装最小版centos的步骤 1. 安装centos 2. 开启网络, 并设置为随机启动 ...

  9. fedora 21下Virtual Box安装Windows XP SP3

    Installing Virtual Box and Windows XP SP3 during Fedora 21 The first step:Download and Install Virtu ...

  10. 行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align

    视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...

随机推荐

  1. 用MATLAB对信号做频谱分析

    1.首先学习下傅里叶变换的东西.学高数的时候老师只是将傅里叶变换简单的说了下,并没有深入的讲解.而现在看来,傅里叶变换似乎是信号处理的方面的重点只是呢,现在就先学习学习傅里叶变换吧. 上面这幅图在知乎 ...

  2. Java设计模式之单例

    一.Java中的单例: 特点: ① 单例类只有一个实例 ② 单例类必须自己创建自己唯一实例 ③ 单例类必须给所有其他对象提供这一实例 二.两种模式: ①懒汉式单例<线程不安全> 在类加载时 ...

  3. suid sgid sbit chattr lsattr

    suid 一般用于二进制可执行文件,suid代表当用户执行此二进制文件时,暂时具有此文件所有者的权限 chmod 4xxx binfile sgid 一般用于目录,sgid代表当其他用户在此目录下创建 ...

  4. js 检测页面刷新或关闭

    window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }

  5. 以libfuse为例介绍rpm打包工具rpmbuild的使用和SPEC文件的编写

    一.rpmbuild命令的安装 yum install rpm-build 二.用法 rpmbuild -bb XXXX.spec或者rpmbuild -ba XXX.tar.gz 三.目录概述 rp ...

  6. Android开发自学笔记(Android Studio)—4.4 AdapterView及其子类

    一.引言       AdapterView本身是一个抽象类,而它派生的子类在用法上也基本相似,只是在显示上有一定区别,因此把他们也归为一类.       AdapterView具有如下特征: Ada ...

  7. Ubuntu 16.04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  8. VUE --- 给页面加点网络动态数据

    这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容.对应有一个库叫 vue-resource 帮我们解决这个问题. 使用命令行安装 cn ...

  9. 83 parrted-分区和分区大小的调整

    parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...

  10. U盘启动 WinPE系统维护工具 任意安装GHO/WIM/ESD系统映像 无广告专业版

    WinPE系统维护工具简介: 1.工具箱基于Windows 8 64位系统制作. 2.强大的DG分区工具专业版4.9.1(DOS版为4.9.0). 3.破解windows密码工具. 4.硬盘.内存检测 ...