Css bug effective solution

1. Browser selector
These selectors are useful when you need to design css for a browser.
IE6 and earlier versions. This article is organized. For more information, see the source!
* Html {}
IE7 and earlier versions
*: First-child + html {} * html {}
Only for IE7
*: First-child + html {}
IE7 and contemporary browsers
Html> body {}
Only contemporary browsers (IE7 not applicable)
Html>/**/body {}
Opera9 and earlier versions
Html: first-child {}
Safari
Html [xmlns * = ""] body: last-child {}
To use these selectors, place them before the style. For example:
Example Source Code
# Content-box {
Width: 300px;
Height: 150px;
}
Example Source Code
* Html # content-box {
Width: 250px;
}
II. Make IE6 support PNG transparent
A Bug in IE6 has caused a lot of trouble. It does not support transparent PNG images.
You need to use a css Filter.
Example Source Code
* Html # image-style {
Background-image: none;
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "fil
Ename.png ", sizingMethod =" scale ");
}
3. Remove the dotted line of the hyperlink
In FireFox, when you click a hyperlink, a dotted line outline will appear on the periphery. This is easy to solve. You only need to add the following to the label style: This article is organized by us. For reprinting, please indicate the source!
Example Source Code
Outline: none.
A {
Outline: none;
}
4. Define the width of the line element
If you define the width for an element in the row, it is only valid under IE6. all HTML elements are either in-row elements or block elements. the row elements include: <span>, <a>, <strong>, and <em>. the block elements include <div>, <p>, Example Source Code
Span {width: 150px; display: block}
5. Center a fixed-width page
To center the page in the browser, you need to locate the outer div and set the margin to auto.
Example Source Code
# Wrapper {
Margin: auto;
Position: relative;
}
6. IE6 double margin bug

VII. General solution to Box Model Box bug

8. 3px gap between two layers
9. The HTML comment in IE causes strange text copying
10. Image replacement technology
Text is better than titles with images. Text is very friendly to screen readers and SEO.
Example Source Code
HTML:
<H1> <span> Main heading one </span> CSS:
H1 {background: url(heading-image.gif) no-repeat ;}
H1 span {
Position: absolute;
Text-indent:-5000px;
}
You can see that we use the standard Turn off the css and see what the header looks like. This article is organized by us. Repost it and indicate the source!
11. Minimum width
Another bug in IE6 is that it does not support the min-width attribute. min-width is quite useful. Especially for an elastic template, they have a width of 100%. min-width can tell the browser when it will not compress the width.
For all browsers except IE6, you only need one min-width: Xpx. For example:
Example Source Code
. Container {
Min-width: 300px;
}
In order for him to work in IE6, we need some extra work. At the beginning, we need to create two divs, one containing the other:
Example Source Code
<Div class = "container">
<Div class = "holder"> Content </div>
</Div>
Then you need to define the min-width attribute of the outer div. This article will be sorted out and reprinted. Please indicate the source!
Example Source Code
. Container {
Min-width: 300px;
}
This is the time for IE hack to show off its skills. You need to include the following code:
Example Source Code
* Html. container {
Border-right: 300px solid # FFF;
}
* Html. holder {
Display: inline-block;
Position: relative;
Margin-right:-300px;
}
As the browser window is resized the outer div width ces CES to suit until it shrinks to the border width, at which point it will not shrink any further. the holder div follows suit and also stops shrinking. the outer div border width becomes the minimum width of the inner div.
12. Hide the horizontal scroll bar
To avoid horizontal scroll bars, add overflow-x: hidden to the body.
Example Source Code
Body {overflow-x: hidden ;}
This technique is useful when you decide to use an image or flash that is larger than the browser window.