如何用firefox修复<div>宽度?</div>

时间:2010-10-15 11:32:16

标签: html css

下面div宽度中的

是675.

宽度:675px正在inetrnet explore 8&amp; 9

中工作

购买firefox和谷歌chrmo显示宽度2px额外..为什么这样。

如何在firefox和google chrmo中修复675?

<div  style="width: 675px; height: 50px;border: 1px solid red"  >

</div>

3 个答案:

答案 0 :(得分:6)

你的doctype声明是什么?如果它在IE中处于怪癖模式,它将边框计为宽度的一部分,因为这是IE的历史行为。

尝试添加HTML 5 doctype声明

<!doctype html>

因为它将在任何浏览器中触发标准模式。

答案 1 :(得分:3)

Firefox实际上正在显示正确的行为。框应该根据它们所拥有的内容的大小来定义,而不是它们在页面上的大小。根据规格,盒子模型计算表明你指定的样式的盒子应该是675 +(50×2)+(1×2)像素宽,在页面上给出一个777像素宽的盒子,足够内部空间可容纳675像素宽的东西。

然而,微软在他们的Infinite Wisdom中决定忽略这些规格,而是创造了675 - (50 X 2) - (1 x 2)像素宽的盒子,导致一个盒子出现675像素宽,但只能容纳573像素宽的内容。这违反了W3C规范,并导致您遇到的互操作性问题。

微软后来看到了他们的方式的错误,并改编了W3C盒子模型,但为了保持向后兼容性,他们引入了试图确定是否使用正确的盒子模型或古怪的盒子模型的规则(称为分别是严格/标准模式和怪癖模式)。

一般的经验法则是,如果您没有在文档顶部包含文档类型,或者包含格式不正确的文档类型,那么浏览器将进入怪癖模式并使用不正确的框模型。如果在文档顶部放置格式正确的doctype,浏览器将进入标准模式并使用W3C框模型。

这里有一个很大的例外是Internet Explorer 6.如果您正在使用XHTML并包含XML前导码,那么无论doctype如何,IE6都将始终进入Quirks模式。

以下doctypes将触发严格模式:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (HTML 4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (XHTML 1.0 strict)
<!DOCTYPE html> (HTML 5)

通常认为最好的做法是尽可能避免怪异模式,以避免将来的互操作性问题。因此,您应该尝试在您创建的每个页面中包含标准模式doctype。但是要小心,如上所述,如果您使用XHTML文档类型,IE6仍然会引起令人讨厌的意外,因为这些需要XML包装器,并且无论您使用什么类型的doctype,包装器都会导致怪异模式触发。

答案 2 :(得分:1)

尝试以百分比形式给出宽度。宽度= 50%