Box Model 盒模型bug的一般解决办法

我们定义一个最基本的层boxtest：

 代码如下 复制代码
#boxtest{ 
border:20px     solid #60A179;
padding: 30px;
background :    #ffc;
width : 400px;
}

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。
但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。
为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。

 代码如下 复制代码
#boxtest{
border:20px solid #60A179;; 
padding:30px;
background: #ffc;
width :400px;
voice-family :     ""}"";
voice-family :inherit;
width :    300px;
}

同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }

时间： 2024-09-14 16:42:18

Box Model 盒模型bug的一般解决办法的相关文章

盒模型bug的解决方法

解决 作者:阿捷 2004-7-22 22:37:07本文来自:CSS/Examples/boxmodelhack.html">tantek.com,也可以阅读<网站重构>第225-235页了解更多. 我们定义一个最基本的层: boxtest div.boxtest{ border:20px solid #60A179;padding: 30px;background : #ffc;width : 300px;} 标准情况下,这个盒的宽度是:20+30+300+30+20=40

Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法

[现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v: 1 }, { n: "d", v: 1 }, { n: "e", v: 1 }, { n: "f", v: 1 }, { n: "g", v: 1 }, { n: "h", v: 1 }, { n: &qu

jquery IE6 select.val() bug报错解决办法

JS代码:    代码如下 复制代码 $(function(){   for(var i=0;i<;5;i++){       $("#sel").append(''+i+'')   }   $("#sel").val("4"); }) HTML代码:  代码如下 复制代码 <SELECT id=sel></SELECT> 问题就是这样.解决方法把select.val("值") 改成attr(&q

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

深入讲解CSS中盒模型的用法

  视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子. 例如: 如何生成元素框; 处理各元素之间的关系; 根据框的尺寸.定位等CSS属性来确定元素的位置等; 因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)及视觉格式化模型的原理. 文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离.元素内容的位置.背景图片的位置等等.而浏览器根

w3c系列之CSS（四）：深入理解盒模型

盒模型是一个老生常谈的话题,本身并不复杂,它描述了文档树所产生的矩形框以及根据可视化格式模型(visual formatting model)所产生的布局结构. 曾经看到一道面试题:说说CSS中的盒模型?网上的回答都是margin,border,padding,width,height之类的,尼玛都是复制粘贴的吧= =.....要是这篇文章也这么写的话就跟前面三篇没啥区别了,既然要深入理解,那就谈点高大上的东西. 1.要深入,先入门 首先还是得对盒模型做个简单而详细的介绍,想要跑,基础要打好~,

CSS基础知识 － 盒模型/定位/浮动

1. Box Model (盒模型)       Box Model 是CSS的指定元素如何显示和交互,是CSS的基石之一.       页面上的每个元素被看成是一个矩形框,它由内容,填充(padding),边框(border),空白边(margin)组成.       他们之间的关系如下:       [ margin [ border [ padding [ content ] ] ] ]       margin, border, padding 都是可选的,他们的默认值为0.      

CSS基础：CSS2盒模型

css CSS2盒模型 CSS2中的盒模型是关系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如<div>.<p>.<a>--盒模型包含(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border.下图是CSS盒模型的示意图 平面示意图Flash示意模型 需要说明的是:IE5.x 和 IE 6.0在quirks模式下使用自己的错误的

css3弹性盒模型（Flexbox）详细介绍

 Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 创建Flex容器 flexbox布局首先需要创建一个flex容器.为此给元素设置display属性的值为flex.对于IE10来说,我们需要在开头的地方添加-ms-flexbox.   复制