Internet Explorer box model bug
Encyclopedia
The Internet Explorer box model bug refers to the way in which earlier versions of Internet Explorer
handle the sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets
language. As of Internet Explorer 6
, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see quirks mode
). Internet Explorer for Mac
is not affected by this non-standard behavior.
s are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as
Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."
In 1996, CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.
At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0
and Internet Explorer 4.0
both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.
(W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer
in "quirks mode
" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than it would result following the standard bahavior.
and onward are not affected by the bug if the page contains certain HTML
document type declaration
s. These versions maintain the buggy behavior when in quirks mode
for reasons of backward compatibility. For example, quirks mode is triggered:
Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the “box model hack” developed by Tantek Çelik
, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that that browser parses CSS rules. The implementation of these CSS “hacks” has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.
Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment
and/or CSS filter
s to work around the box model bug in older versions of Internet Explorer.
The W3C has included a "box-sizing" property in CSS3. When
, Opera
7.0 and later, and Konqueror
3.3.2 and later support the CSS3 box-sizing property. Gecko-based
browsers such as Mozilla Firefox
support the same functionality using a proprietary
"-moz-box-sizing" property, and WebKit
browsers such as Apple Safari
and Google Chrome
support it as a proprietary "-webkit-box-sizing" property.
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
handle the sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
language. As of Internet Explorer 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...
, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see quirks mode
Quirks mode
In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode....
). Internet Explorer for Mac
Internet Explorer for Mac
Internet Explorer for Mac was a proprietary web browser developed by Microsoft for the Macintosh platform. Initial versions were developed from the same code base as Internet Explorer for Windows...
is not affected by this non-standard behavior.
Background
The Cascading Style Sheets (CSS) specification describes how elements of web pageWeb page
A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...
s are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as
p and blockquote—a width and height, and three levels of boxes surrounding it: padding, borders, and margins. While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."
In 1996, CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.
At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0
Netscape Communicator
Netscape Communicator was an Internet suite produced by Netscape Communications Corporation. Initially released in June 1997, Netscape Communicator 4.0 was the successor to Netscape Navigator 3.x and included more groupware features intended to appeal to enterprises.- Editions :Netscape...
and Internet Explorer 4.0
Internet Explorer 4
Microsoft Internet Explorer 4 is a graphical web browser released in September 1997 by Microsoft, primarily for Microsoft Windows, but also with versions available for Apple Mac OS, Solaris, and HP-UX and marketed as "The Web the Way You Want It".It was one of the main participants of the first...
both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.
Bug
According to the CSS1 specification, released by the World Wide Web ConsortiumWorld Wide Web Consortium
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
in "quirks mode
Quirks mode
In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode....
" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than it would result following the standard bahavior.
Workarounds
Internet Explorer versions 6Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...
and onward are not affected by the bug if the page contains certain HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
document type declaration
Document Type Declaration
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document with a Document Type Definition...
s. These versions maintain the buggy behavior when in quirks mode
Quirks mode
In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode....
for reasons of backward compatibility. For example, quirks mode is triggered:
- When the document type declarationDocument Type DeclarationA Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document with a Document Type Definition...
is absent or incomplete; - When an HTML 3 or earlier document is encountered;
- When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
- When an SGML comment or other unrecognized content appears before the document type declaration
- When there are errors anywhere in the document
- Internet Explorer 6 also uses quirks mode if there is an XMLXMLExtensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
declaration prior to the document type declaration.
Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the “box model hack” developed by Tantek Çelik
Tantek Çelik
Tantek Çelik is a computer scientist of Turkish-American descent and was the Chief Technologist at Technorati. He is one of the principal editors of several CSS Specifications....
, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that that browser parses CSS rules. The implementation of these CSS “hacks” has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.
Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment
Conditional comment
Conditional comments are conditional statements interpreted by Microsoft Internet Explorer in HTML source code. Conditional comments can be used to provide and hide code to and from Internet Explorer....
and/or CSS filter
CSS filter
A CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards...
s to work around the box model bug in older versions of Internet Explorer.
Support for Internet Explorer's box model
Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach. Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content. He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content. Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.The W3C has included a "box-sizing" property in CSS3. When
box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents". Internet Explorer 8Internet Explorer 8
Windows Internet Explorer 8 is a web browser developed by Microsoft in the Internet Explorer browser series. The browser was released on March 19, 2009 for Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008, and Windows 7. Both 32-bit and 64-bit builds are available...
, Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
7.0 and later, and Konqueror
Konqueror
Not to be confused with the Conqueror web browser.Konqueror is a web browser and file manager that provides file-viewer functionality for file systems such as local files, files on a remote ftp server and files in a disk image. It is a core part of the KDE desktop environment...
3.3.2 and later support the CSS3 box-sizing property. Gecko-based
Gecko (layout engine)
Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
browsers such as Mozilla Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
support the same functionality using a proprietary
Proprietary software
Proprietary software is computer software licensed under exclusive legal right of the copyright holder. The licensee is given the right to use the software under certain conditions, while restricted from other uses, such as modification, further distribution, or reverse engineering.Complementary...
"-moz-box-sizing" property, and WebKit
WebKit
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
browsers such as Apple Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
and Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
support it as a proprietary "-webkit-box-sizing" property.
External links
- Tantek Çelik's description of the "box model hack"
- Getting Internet Explorer to Play Well with CSS - article on about.com that outlines various ways to get around box model problem and other IE bugs.
- Cascading Style Sheet Compatibility in Internet Explorer 7 - MSDN article, July 2006.
- CSS Box Model differences in Firefox and Internet Explorer - Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.