12 most common CSS bug solutions and Techniques

CSS bug is the biggest headache in layout. We need to consider various browsers in order to achieve consistent results. It is a pity that the competition among various manufacturers has caused many problems. IE6 and IE7 are also very different in many problems. A large number of technical documents on 52css.com also contain this content. Easily solving CSS bugs is a required skill. Now we have sorted out the 12 most common CSS bug solutions and tips for CSS bug classes. If you still have questions, you are welcome to go to 52css.com to check and search for relevant content.

1. browser Selector

These selectors are useful when you need to design CSS for a browser.
IE6 and earlier versions. This article is organized by 52css.com. 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 [www.52css.com] # Content-box {
Width: 300px;
Height: 150px;
}

Example source code [www.52css.com] * html # Content-box {
Width: 250px;
}

You can also refer to-CSS hacks: browser-specific selector introduction.
Http://www.52css.com/article.asp? Id = 635

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 [www.52css.com] * 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 it to the label style: This article is organized by 52css.com. Please indicate the source for reprinting!

Example source code [www.52css.com] outline: none.
A {
Outline: none;
}

You can also refer to-except the dashed line boxes of link elements (compatible with IE7, IE6, and ff)
Http://www.52css.com/article.asp? Id = 743

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. in-row elements include: <span>, <A>, <strong>, and <em>. the block elements include <div>, <p>, Example source code [www.52css.com] 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 [www.52css.com] # wrapper {
Margin: auto;
Position: relative;
}

6. IE6 double margin bug

Add display: inline to this object to solve the problem. Details:
Http://www.52css.com/article.asp? Id = 144

VII. General Solution to Box Model box bug

This is a notorious issue. For details, refer to here:
Http://www.52css.com/article.asp? Id = 106

8. 3px gap between two layers

Solution to the legendary "ie 3px bug:
Http://www.52css.com/article.asp? Id = 146

9. The HTML comment in IE causes strange text copying

The duplicate characters bug is amazing. Specific solutions:
Http://www.52css.com/article.asp? Id = 440

10. Image Replacement Technology

Text is better than titles with images. text is very friendly to screen readers and SEO.

Example source code [www.52css.com] 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 52css.com. Please indicate the source for reprinting!

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 [www.52css.com]. 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 [www.52css.com] <Div class = "Container">
<Div class = "Holder"> content </div>
</Div>

Then, you need to define the Min-width attribute of the outer Div. This article is organized by 52css.com. Please indicate the source for reprinting!

Example source code [www.52css.com]. 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 [www.52css.com] * 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 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 [www.52css.com] body {overflow-X: hidden ;}

This technique is useful when you decide to use an image or flash that is larger than the browser window.