CSS enhancements in Internet Explorer 6
Release Date: 1/17/2005
| Update Date: 1/17/2005
Lance SilverMicrosoft Corporation
Summary: This article describes the enhancement support provided by Microsoft Internet Explorer 6 or higher to the Cascade Style Table (CSS) specification.
Prerequisites: This article assumes that you are familiar with HTML and CSS.
To see the examples in this article, Internet Explorer 6 or higher must be installed on the system. You can download Internet Explorer 6 from http://www.microsoft.com/windows/ie/default.htm.
This page
Introduction! Doctype "Switch" Who moved my canvas inside the box? Other properties More property values are more stringent style sheet analysis and more new features?
Introduction
Microsoft® Internet Explorer 6 and later supports some earlier Internet Explorer that does not support CSS features. Supported two additional CSS properties for MIN-Height and Word-spacing. Several other possible values are also supported, including the pre-value of the White-Space property, and the list-item value of the Display property. Other important functions include more stringent style sheet analysis, and change which HTML elements can represent the document content to be presented to the outermost surface therein.
These enhancements are designed to comply with CSS specifications. All properties, values, and features defined in CSS are supported by the Level 1 (CSS1) specification, including how to define how to measure and format settings for metrics and their associated margin, border, and padding properties.
But the true advantage is that even if all of these enhancements, no significant compatibility issue between your earlier version Internet Explorer developed.
Back to top
DOCTYPE "Switch"
This section describes how to use it in documentation for Internet Explorer 6 or later! DOCTYPE declarations to open compliant standards.
! DOCTYPE statement is a standard universal tag language (SGML) declaration that specifies the document type definition (DTD) complied with document (theoretical). It looks like an HTML tag without end tags, but it starts with an exclamation mark (!) And contains just a single tag, not the attribute name value pair. This statement must be on the beginning of the document and in front of the HTML tag.
By including! DOCTYPE declarations in the document, you can open a standard mode. Label specifies the unique name of the DTD, which can be attached to the version number of the DTD. Definition Specifies the definition of DTD specified in Label. The URL specifies the location of the DTD.
Three definitions, transitional, and strices are specified in the HTML 4.0 specification. Frameset is used for Frameset documentation, which contains all documents except Frameset documents, and strict "Excluded the World Wide Web Federation (W3C) expects to gradually discard the privility and elements" £ ¨html 4.0 Specifications).
The following table shows which values for Internet Explorer 6 or higher, which values that meet the standard mode.
Labeldefinition exists in the URL does not exist! Doctype customs HTML (there is no version) Trim HTML 2.0 customs HTML 3.0 customs HTML 3.2 custom Gate HTML 4.0 does not exist Definition open HTML 4.0 frameset switch HTML 4.0 Transitional Switch HTML 4.0 strict Open XHTML open XML open open unrecognizable! DOCTYPE opens the table in front shows that when the document does not exist! DOCTYPE declaration, when the Label in the declaration does not specify the HTML specification version, or its designated version is earlier than When HTML 4.0, the standard mode is closed. This table shows that if you specify the FrameSet or Transitional Definition of HTML 4.0 in! DOCTYPE declaration, you only open the standard mode when you include the URL. When you specify the strict definition of HTML 4.0 in the DOCTYPE declaration, as well as HTML 4.0 without any definition, you will also open the standard mode.
To allow creating new DTDs (such as HIDAD 11.22), when! Doctype declares that it is not recognized, it will open the standard mode. When you specify the HTML version (such as HTML 1.0 or HTML 3.22) that is not listed above, you will also open the standard mode.
DOCTYPE example
The example in this section shows how to use! Doctype declaration to specify DTDs to be observed, and how to open the standard mode.
Both declarations in the examples below are specified as complying with Transitional HTML4.0 DTD. The second statement specifies the URL of the DTD. The first statement does not specify the content. The second statement opens the standard mode for Internet Explorer 6 or higher. The first statement does not open this mode.
"http://www.w3.org/tr/html4/loose.dtd">
Both declarations in the examples below are specified as complying with HTML 4.0 DTD. The first statement does not specify definition. The second statement specifies the Strict definition of this DTD. There are no specified URLs in both statements. Both statements have opened a standard pattern.
Back to top
Complete all tasks inside the box
This section describes the way you use! Doctype declaration to open conforming to standard mode, the way the Internet Explorer 6 or higher calculates the Width and HEIGHT properties of the element, which also describes how this approach is calculated by the earlier version of the Internet Explorer property. the difference.
The CSS1 box model defines the content in an HTML element, as if there is an invisible rectangular border around it. There are three rectangular zones around this border, which are represented by margin, border, and padding attributes, respectively. You can use the style sheet to operate the size and appearance of the border and its surroundings.
The earlier version of Internet Explorer calculates the Width and Height properties. The CSS1 box model is not observed. In CSS1, the width property is defined as the distance between the left frame and the right frame around the element content. Similarly, the Height property is defined in CSS1 as the distance between the upper box and the lower frame. However, for earlier versions of Internet Explorer, Width, and Height properties include Border and Padding Zone around the element border. The figure below illustrates this difference. Figure 1. Illustration for the difference between Internet Explorer 6 and earlier versions of Width and HEIGHT attributes
In line with behavior
For Internet Explorer 6 or later, when you use! DOCTYPE declaration Open the standard mode, the width and height properties are specified, and the distance between the left, right boxes, and the lower and lower boxes are specified. Does not include Border and Padding zone.
Do not meet
When! Doctype declares that when you meet the standard mode, just like an earlier version of Internet Explorer, the width property includes the content box of the object, plus the values of the following properties: Border-Left, Border-Right, Padding-Left and Padding -Right. The width property value minus these attribute values, equal to the width of the parent object content box. Similar to it, the Height property value subtracts the sum of the Border-Top, Border-Bottom, Padding-Top, and Padding-Bottom property, is equal to the height of the parent object.
Frame model example
The example in this section describes how the same HTML element is presented in different ways when you use the Internet Explorer 6 or later in the document! DOCTYPE declarations open the standard mode.
The Width and Height of the DIV element in the HTML code snippet are 200 pixels, and Border-Width is 50 pixels. When you click the button behind the code snippet, a document with two iframe elements is started. The document specified by the left IFRAME element is included! Doctype declaration opens a standard mode for Internet Explorer 6 or higher. The right IFRAME element is included in the document! DOCTYPE declaration does not open a standard mode. The IFRAME element on the right also shows the rendering method of the DIV element in the earlier version Internet Explorer.
body>
html>
Note When you meet the standard mode, if you don't specify your Background property for an HTML element, the BACKGROUND for the body element will become the background of the HTML element. This situation is in accordance with CSS2.
Back to top
Other properties
This section describes two CSS properties available in Internet Explorer 6 or later - MIN-Height and Word-Spacing.
Min-height attribute
The min-height property sets or retrieves a value, which specifies the minimum height of the element. For Internet Explorer 6, this property is applied only to TD, TH, and TR elements in fixed layout tables. No matter how you open the standard, you can use this property in writing whether you have a standard mode.
Element's Height is set to Auto by default. When using this default setting, the height of the element will be dynamically adjusted. You can use the min-height property to specify the minimum height of cells or rows in fixed layout tables.
The following code snippet shows how to set the min-height property in a declared manner. The fixed layout table is a minimum height of 100 pixels.