How to fix <div>width with firefox?
in the below 开发者_开发问答div width is 675.
width:675px is working currect in inetrnet explore 8&9
buy in firefox and google chrmo display width 2px extra.. why like this.
How to fix 675 in firefox and google chrmo ?
<div style="width: 675px; height: 50px;border: 1px solid red" >
</div>
What is your doctype declaration? If it's in quirks mode in IE, it is counting the borders as part of the width, as that is IE's historical behavior.
Try adding the HTML 5 doctype declaration
<!doctype html>
as that will trigger Standards mode in any browser.
Firefox is in fact displaying the correct behaviour. Boxes are supposed to be defined in terms of how big the content they hold is, not how big they will be on the page. According to the specs, box model calculation says that a box with the styles you have specified should be 675 + (50 X 2) + (1 X 2) pixels wide, giving a box that appears 777 pixels wide on the page, with enough internal space to hold something 675 pixels wide.
Microsoft however, in their Infinite Wisdom, decided to just ignore the specs, and instead they create the box to be 675 - (50 X 2) - (1 x 2) pixels wide, resulting in a box that appears 675 pixels wide but which can only hold content that's 573 pixels wide. This is in violation of the W3C specs, and causes the interoperability problems you've run into.
Microsoft later saw the error of their ways, and adapted the W3C box model, but in order to maintain backwards compatibility they introduced rules that try to determine whether or not to use the correct box model, or the quirky one (known as strict/standards mode and quirks mode respectively).
The general rule of thumb is that if you don't include a doctype at the top of your document, or include an improperly formed one, then the browser will go into quirks mode and use the incorrect box model. If you put a well-formed doctype at the top of the document, the browser will enter standards mode and use the W3C box model.
One BIG exception here is Internet Explorer 6. If you are working with XHTML and include the XML preamble, then IE6 will ALWAYS enter Quirks Mode, regardless of the doctype.
The following doctypes will trigger strict mode:
<!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)
It is generally considered best practice to avoid quirks mode wherever possible in order to avoid future interoperability problems. Therefore, you should try and include a standards mode doctype in every page you create. Be careful though, as mentioned above IE6 can still cause nasty surprises if you're working with XHTML doctypes as these require an XML wrapper, and the wrapper will cause quirks mode to trigger regardless of what doctype you use.
try to give width in percent.ed;width=50%
加载中,请稍侯......
精彩评论