CSS compatibility issues (i)

Opening words: Do not forget, or your own obediently take notes!

Body Start:

(i)If your page is IE7 compatible, and you don't want to make a lot of changes to your existing code, and you can use it in IE8, Microsoft claims that developers just need to add a line of code to the current IE7-compatible Web site to solve the problem, as follows: Code:<meta http-equiv= " X-ua-compatible "content=" ie=7 "/>(ii)Fix CSS style compatibility issues with Firefox IE6 IE71 CSS styles for Firefox IE6 IE7Now most are used!important to hack, for IE6 and Firefox test can display normally, but IE7 to!important can correctly explain, will cause the page did not display as required! Find a good hack way for IE7 is to use "*+html", now with IE7 browsing, there should be no problem now write a CSS can do this: #1 {color: #333;}/* Moz */* HTML #1 {color: #666;}/* I E6 */*+html #1 {color: #999;}//IE7 * * The font color under Firefox is displayed as #666,ie7 under the font color shown as #999 under #333,ie6.2 centering issues in CSS layoutsThe main styles are defined as follows: body {text-align:center;} #center {Margin-right:auto; Margin-left:auto; Description: First defines the text-align:center in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available. But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; "What needs to be explained is that if you want to use this method to make the whole page to center, it is recommended not to set in a div, you can sequentially split multiple div, as long as in each split div defined margin-right:auto; Margin-left:auto; You can do it.3 box model different interpretations.#box {width:600px;//for ie6.0-w\idth:500px;//for ff+ie6.0} #box {width:600px!important//for ffwidth:600px;//for ff+ Ie6.0width/**/:500px;//for ie6.0-}4 The double distance generated by the floating IE#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore} Here's a bit of block,inline two elements, the block element is characterized by: always start on new lines, height, width, row height, margin can be controlled (block element); The inline element is characterized by the same line as the other elements,... Uncontrollable (inline Element), #box {display:block;//Can be simulated as block element display:inline for inline elements,//effect diplay:table for the same row arrangement;5 ie with width and height issuesIE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height. For example, to set the background image, this width is more important. To solve this problem, you can: #box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}6 minimum width of the pageMin-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. To make this command available on IE, you can put a <div> into the <body> tab and then assign a class to the div: then the CSS is designed like this: #container {min-width:600px;width: E-xpression (Document.body.clientWidth < 600?) "600px": "Auto");} The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.7 Clear Float. hackbox{display:table;//displays the object as a block-element-level table} or. Hackbox{clear:both;} or join: After (pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. This is the most troublesome ... #box: after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}8 div Floating IE text generates 3 pixel bugThe left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left. #box {float:left;width:800px;} #left {float:left;width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}html code <div id=box><div id=left></div><div id=right> </DIV></DIV>9 Attribute Selector (this is not compatible, is a bug to hide CSS)p[id]{}div[id]{}p[id]{}div[id]{} This is for IE6.0 and IE6.0 the following versions are hidden, FF and Opera action attribute selector and sub-selectors are still different, the range of the sub-selector is reduced in form, the range of the property selector is larger , such as P[id], all P tags have the same type of ID.Ten IE hide and seek problemsWhen the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems. Some content does not show up when the mouse selects this area is found content is indeed on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.11 Height not adaptedHeight intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign. Example: <div id= the contents of the "box" ><p>p object </p></div>css: #box {background-color: #eee;} #box p {margin-top:20px;margin-bottom:20px; text-align:center;} Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

A IE8 ta BLE table TD setting style modification method with invalid width

In the process of styling, it is often encountered, when setting the table table TD width, the IE8 fails. The following are the compatible modification methods:

you need to add a style to the table style= "table-layout:fixed;" plus a tr with a height of 0 and a given width on the first line . For example:

<table class= "Subtabledetail" style= "table-layout:fixed;" ><tr>&LT;TD class= "w120" style= "height:0; Padding:0;line-height:0;border:none; " >1</td>&LT;TD class= "w240" style= "height:0; Padding:0;line-height:0;border:none; " ></td>&LT;TD class= "w120" style= "height:0; Padding:0;line-height:0;border:none; " ></td>&LT;TD class= "" style= "height:0; Padding:0;line-height:0;border:none; " ></td></tr>

<tr>

<th colspan= "4" >&nbsp; I want to complain about the business and issues </th></tr><tr>&LT;TD class= "Coltitle w120" > Company name:</td>&LT;TD class= "w240" > China Telecom Co., Ltd. </td>&LT;TD class= "Coltitle w120" > Incident:</td>&LT;TD class= "" > Shanghai </td></tr></table>

13, table table in the text overflow text-overflow:ellipsis use TD form width failure problem

(1), general text beyond the width can be set up as follows:width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; Note: The container that needs to set the text overflow must be set to width.     Where: Text-overflow value is clip trimmed text. Ellipsis displays the ellipsis to represent the trimmed text. String uses the given string to represent the trimmed text.all major browsers support the Text-overflow property. The White-space value is the normal default. The blank will be ignored by the browser. The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML. The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered. Pre-wrap preserves a sequence of whitespace characters, but wraps normally. Pre-line merges a sequence of whitespace characters, but preserves newline characters. Inherit specifies that the value of the White-space property should be inherited from the parent element.Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8). (2), table table want to set the text overflow operation can follow the following methodstable{table-layout:fixed;} Note: Table must be set table-layout:fixed; properties, text overflow settings to take effect; Td{width:300px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;} Where: Table-layout value is: automatic default. The column width is set by the cell contents. The fixed column width is set by the table width and column width. Inherit specifies that the value of the Table-layout property should be inherited from the parent element. Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).Note: If the table has th and TD labels, you must set the width, if you set the width of th, the TD width is not set, then set table-layout:fixed; the TD width will expire after the text overflow is in effect. (3), set the mouse to move to the above display all content(1) Non-table table can be used directly: hover settings (2) Table table using the JS setting method $ (". List"). Delegate ("TD", "MouseOver", function () {$ ("table"). CSS ("        Table-layout "," Automatic ");    $ (this). css ({"White-space": "Pre-wrap", "Overflow": "Visible"});        }); $ (". List"). Delegate ("TD", "Mouseout", function () {$ ("table"). CSS ("Table-layout", "fixed"); $ (this). css ({"Text-overflow": "Ellipsis", "White-space": "nowrap", "Overflow": "Hidden"});The table table is focused on setting table{table-layout:automatic}, and using hover to manipulate the text content goes beyond the table and does not break the line.

Note: IE can recognize *; standard browsers (such as FF) do not recognize *;IE6 can recognize *, but not!important,IE7 can recognize *, can also identify!important;FF does not recognize *, but can identify!important;

Reference resources:

http://blog.csdn.net/i_am_listen/article/details/68067305

http://paulfzm.iteye.com/blog/714299

CSS compatibility issues (i)