Example of
page segmentation in a box
| #box { page-break-inside: avoid; } |
Description
This property sets whether paging occurs within a specified element.
Support status
| IE6 No IE7No IE8 Yes |
N. Outline property
example
| #box { outline: solid 1px red; } |
Description
outline is an abbreviation for outline-style, outline-width, and outline-color. This attribute is better than the border attribute because it does not affect the document flow, so it is more useful for debugging layout problems.
Support status
| IE6 No IE7No IE8 Yes |
O.
Examples
of alternative values for the display attribute
| #box { display: inline-block; } |
Description
The display attribute is usually set to block, inline, or none. Alternative values include:
| inline-block inline-table list-item run-in table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group |
Support status
| IE6 No IE7No IE8 Yes |
Handling collapsible white space
example
| p { white-space: pre-line; } div { white-space: pre-wrap; } |
The
pre-line value setting of the white-space attribute collapses multiple whitespace elements into a single whitespace while allowing explicit line breaks. The pre-wrap value of the white-space attribute does not collapse multiple whitespaces into one, but does allow line breaks to be set explicitly.
Support status
| IE6 No IE7No IE8 Yes |
4. Various other technologies
A. Media typeexamples
of @import
| @import url("styles.css") screen; |
Description:
Like the above example, the media type of the imported style sheet file is declared after the file address. In this example, the media type is "screen".
Support status
| IE6 No IE7No IE8 Yes |
BugsAlthough
IE6 and IE7 support @import, they have no effect when the media type is specified, even causing the normal @import rule to be invalid.
B. Count increment
example
| h2 { counter-increment: headers; } h2:before { content: counter(headers) ". "; } |
Description
This CSS technique allows you to automatically increment the number that appears before a specified element, used in conjunction with the before pseudo-element.
Support status
| IE6 No IE7No IE8 Yes |
C.
Examples of
reference characters for generated content
| q { quotes: "'" "'"; } q:before { content: open-quote; } q:after { content: close-quote; } |
The description
specifies the citation call sign used to generate the content, for use with q tags.
Support status
| IE6 No IE7No IE8 Yes |
5. Important bugs and incompatibility issues
The following are many bugs in IE6 and IE7 that are not mentioned above. Of course this list does not include entries that are not supported in all three browsers.
IE6 Bugs
A. Does not support styling the <abbr> element
B. Does not support class and ID names starting with hyphens and underscores
C. The <select> element always appears at the top of the stack regardless of the z-index value
D. If the anchor pseudo-classes are not used in the correct order (:link, :visited, :hover), the :hover pseudo-class will have no effect
. E. An !important declaration of an attribute will be replaced by an unused !important declaration of the same attribute in the same rule. Two statements covered.
F. Height behaves like min-height
G. Width behaves like min-width
H. Double left and right margins
I. Dotted border (dotted) looks like dotted border (dashed)
J. Line-through value of text-decoration The text looks a bit taller than other browsers
. If the ordered list has a fixed structure (haslayout is true, the height/width/zoom of li cannot be set to activate haslayout values), the serial number will not increase. Instead, it remains at 1
L. List elements do not support all available values of list-style-type
M. If the list entry floats, the specified list-style-image will not be displayed
N. @font-face is not fully supported
O. Some selectors will incorrectly match comments and documentation declarations
. If an ID selector combined with a class selector does not match, the same ID selector combined with a different class selector will also be treated as a mismatch.
IE7 Bugs
A. If the ordered list has a fixed structure (haslayout is true, the height/width/zoom of li cannot be set to activate haslayout values), the serial number will not increase, but remains at 1
B. List elements are not supported All available values of list-style-type
C. If the list item is floated, the specified list-style-image will not be displayed
D. @font-face is not fully supported
E. Some selectors will incorrectly match comments and documents Disclaimer
F. Some IE bugs not mentioned here only occur in specific environments and are not assigned to specific CSS properties or values.