Css bug solutions and tips for CSS bugs

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. Many technical documents of bkjia.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 bkjia.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
* 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:

# Content-box { Width: 300px; Height: 150px; } * Html # content-box { Width: 250px; }

You can also refer to-CSS hacks: browser-specific selector introduction.

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.

* 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:


Outline: none.
A {
Outline: none;
}

You can also refer to-except the dashed line boxes of link elements (compatible with IE7, IE6, and FF)

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>,

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.

# Wrapper { Margin: auto; Position: relative; }

6. IE6 double margin bug

Add display: inline to this object to solve the problem. Details:

VII. General Solution to Box Model Box bug


8. 3px gap between two layers

Solution to the legendary "IE 3px bug:

9. The HTML comment in IE causes strange text copying

The Duplicate Characters Bug is amazing.

10. Image Replacement Technology

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

HTML: <H1> <span> Main heading one </span> CSS: H1 {background: url(heading-image.gif) no-repeat ;} H1 span { Position: absolute; Text-indent:-5000px; }

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page