IE6 supports compatible min-width, Max-width CSS style propertiesLet IE6 support Max-width, IE6 support min-width style (body music)When we write CSS, often encounter let a picture or a layout can not exceed set a certain width range value, sometimes need to set a minimum width, followed by DIVCSS5 for everyone to summarize the solution
Web standards is very important is the most annoying point, especially to be compatible with the version of the browser, with the introduction of Microsoft IE7, in the web design needs to consider the compatibility of IE7 before the IE5/IE5.5/IE6 version, has not found a good method, Recently finally found the IE version of the collection package Multiple_ie. Seriously recommended to everyone, you can also easily
New IE8, more asshole. Now let ie explain it with IE7 script.
Add
1.> it is a sub-Selector Used to match the direct generation, and the grandchildren do not match. IE6 is not supported. Example:Li: hover> A sub-object selector only works for the son and does not work for the son.Li: The selector for future generations of hover A. It works for son, grandson, and descendant.
2. IE6 supports underlines,
FAQs about compatibility with IE6 IE7 FF in Div + CSS layout
General use of all browsers (IE6 IE7 FF mainly used in the market)
Height: 100px; dedicated for IE6
_ Height: 100px; dedicated for IE6
* Height: 100px; dedicated for IE7
* + Height: 100px; shared by IE7 and FF
Height: 100px! Important;
I. CSS compatibility
Th
1. Ultimate method: Condition Annotation
The disadvantage is that the Internet Explorer may add additional HTTP requests.
2. CSS selector Differentiation
IE6 does not support sub-selectors. It first uses the regular declarative CSS selector for IE6, and then uses the sub-selector for IE7 + and other browsers.
/* Dedicated for IE6 */
. Content {color: red ;}
The padding shorthand property sets all the inner margin properties in a declaration.
DescriptionThis shorthand property sets the width of all the inner margins of the element, or sets the width of the inner margin on each edge. The inner margin set on a non-replacement element in the row does not affect the row height calculation, so if an element has both an inner margin and a background, it may be visually extended to other rows, possibly overlapping with other content. The background of the
The CSS padding property defines the inner margin of an element. The Padding property accepts length or percent values, but negative values are not allowed.
For example, if you want all H1 elements to have 10-pixel internal margins on each side, this is all you need:
h1 {padding:10px;} You can also set the inner margin of each edge in the order of the top, right, bottom, and left, with different unit or percentage values for each edge:
The code is as follows
Copy Code
CSS hack: display different effects on IE6, IE7, and Firefox
It is often used for website creation. It is also important to measure the average usage of a div + CSS architect.
Different browsers use CSS hack:
Difference between IE6 and FF:Background: orange; * Background: blue;
Difference between IE6 and IE7:Background: Green! Important; Background: blue;
Differe
Solve the hack writing of CSS compatibility in IE6, IE7, IE8, and Firefox
The biggest headache for every CSS adjustment is the browser correction problem, because each browser has different interpretations of CSS. Firefox itself is more disciplined and easier to handle, however, when you encounter Microsoft's ie series, the headers are big. Although they are all Internet Explorer, they have different interpretations of CSS in
1, IE6 Strange analysis of the padding and border calculation into the width of highReason: No document declaration causes non-box model parsingWorkaround: Add a document declaration 2, IE6 in block element, left and right floating, set Marin margin double (bilateral distance)Workaround: Display:inline3, the following three is actually the same kind of bug, in fact, is not a bug, for example: the parent tag
I have nothing to do today. I plan to organize common CSS for future use. As expected, IE6 made me Tangle again.
HtmlCode:
DivClass= "Test"Style= "">DdaaaaaaaaaaaaaaaaaaDiv>
CSS code:
. Test { Position : Absolute ; Top : 300px ; Right : 500px ; Left : 0 ; Bottom : 0 ; Zoom : 1 ; _ Display : Block ; Background-color : #00
1. Differences between IE and non-IE browsers # Tip {
Background: blue;/* Non-IE background colors */
Background: red \ 9;/* IE6, IE7, and IE8 background colors */
}
2. Differences between IE6, IE7, IE8, and FF [Difference]: "\ 9", "*", and 」,「*」,「_」
[Example]: # tip {
Background: blue;/* the Firefox background turns blue */
Background: red \ 9;/* The IE8 background turns red */
* Background: black;/* The I
For more information, see http://netsos.cnblogs.com/1 ,! Important (limited function)
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
For example:
# Example {Width: 100px! Important;/* IE7 + FF */Width: 200px;/* IE6 */}
Ii. CSS hack method (for beginners, let's take a look at it and
1, IE6 Strange analysis of the padding and border calculation into the width of highReason: No document declaration causes non-box model parsingWorkaround: Add a document declaration 2, IE6 in block element, left and right floating, set Marin margin double (bilateral distance)Workaround: Display:inline3, the following three is actually the same kind of bug, in fact, is not a bug, for example: the parent tag
:
. Content. test {Width: 200px;Height: 200px;Background: # f60;/* all */Background: #06f9;/* IE */* Background: #666;/* IE6, 7 */_ Background: # ccc;/* IE6 */}/* Webkit and opera */@ Media all and (min-width: 0 ){. Content. test {Background: #0f0;}}/* Webkit */@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){.
.Then put a fillet attribute border-radius:10px, this property even if IE6,IE8 inside does not support also the relationship,The square angle and the fillet angle are not much difference.The code then becomes this:In conjunction with the "CSS" on the div alignment and page layout (click the Open link), I provide a way to put these div in a good version, you are the front-end master.What doesn't support IE6
Article Introduction: when I look at line fifth, IE6 shows the color of green, even if it is changed to \9 result or the same, that is, the IE6 display is the same as the IE7, but IE6 does not support!important; it's a hack.
. bgtest{background:orange;/*==ff==*/background:yellow\0;/*==ie8==*/* Background:green!important;/*==ie7==*/* background:blue;/*
Summary: Although IE6 will be discontinued in April 2014, it must be said that the IE6 market will not disappear with the support of the stop immediately, for Web front-end development engineers, compatible IE6 compatible with each browser, still have to face the work.1.conditions: IE6 Browser, when we do not write thi
first line of the HTML document:Great God's post summarizes the reasons for the bootstrap to find a few, first of all, BOOTSTRAP3 is the mobile device first principle of development, so the reasons may be as follows:1. Remote address is not correctly invokedThat is, as long as the IE9 below, call two dedicated JSBut I test found that only using the above JS file is not OK,2. Incorrect calling methodDo not refer to Respond.min.js or respond.js or CSS
Looking back to the normal effect, think about what may be caused by: hover failure. You can use zoom, display, padding, and so on to fix it, so think it's because of haslayout.
On the mechanism of processing CSS, ie always have a lot of people vomiting blood, but for their current efforts to improve is still worth happy.
Take the Pseudo class: hover support, ie7+ finally added support for other tags outside of a. For such an improvement, of course, is to applauded, but under
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.