The 12 most commonly used CSS bug solutions and techniques

The 12 most commonly used CSS bug solutions and techniques
One, browser-specific selector

These selectors will be useful when you need to design CSS for a particular browser.

IE6 and its lower version

* HTML {}

IE7 and its lower version

*:first-child+html {} * HTML {}

For IE7 only

*:first-child+html {}

IE7 and contemporary browsers

html>body{}

Contemporary browser only (IE7 not applicable)

html>/**/body{}

OPERA9 and its lower version

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;

}

Second, let IE6 support PNG transparent

A IE6 bug caused big trouble and he didn't support transparent PNG pictures.

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 ");

}

Third, remove the dotted line of hyperlinks

Firefox, when you click a hyperlink, a dotted outline appears around the perimeter. This is easy to solve, just want to add in the tag style: This article by the 52css.com collation, reprint please specify the source!

Example Source Code

Outline:none.

a{

Outline:none;

}

Define the width of the elements in the line

If you define the width of an inline element, it is only valid under IE6. All HTML elements are either inline elements or good block elements. Inline elements include: <span>, <a>, <strong> and <em> Block elements include <div>, <p>, <h1>, <form> and <li>. You can't define the width of an inline element, so you can change the inline element to a block element to solve the problem.

Example Source Code

span {width:150px; Display:block}

To center a fixed-width page

In order for the page to be centered in the browser, you need to position the outer div relatively, and then set the margin to auto.

Example Source Code

#wrapper {

Margin:auto;

position:relative;

}

Six, IE6 double margin Bug

General solution to the Bug in box model box

3px gap between eight and two layers

Ix. HTML annotations in IE cause strange copying of text

X. Picture Replacement Technology

It's better to use text than to use pictures to make headlines. The text is very friendly to screen readers and SEO.

Example Source Code

HTML:

<h1><span>main Heading one</span></h1>

CSS:

H1 {Background:url (heading-image.gif) no-repeat;}

H1 span {

Position:absolute;

Text-indent: -5000px;

}

You can see that we use the standard <h1> label for the title and use CSS to replace the text with the picture. The Text-indent property pushes the text to 5000px to the left of the browser, which is invisible to the viewer.

Turn off the CSS and see what the head looks like. This article by 52css.com, reprint, please specify the source!

Xi. Minimum width

IE6 Another bug is that it doesn't support min-width properties. Min-width is also quite useful, especially for resilient templates, which have a width of 100%, min-width can tell the browser when not to compress the width again.

All browsers except IE6 you only need a min-width:xpx; For example:

Example Source Code

. container {

min-width:300px;

}

We need some extra work to get him to work under the IE6. At first we need to create two Div, one containing another:

Example Source Code

<div class= "Container" >

<div class= "Holder" >Content</div>

</div>

Then you need to define the min-width attributes of the outer Div, this article by the 52css.com collation, reprint please specify the source!

Example Source Code

. container {

min-width:300px;

}

This is the time for IE hack. 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 reduces to suit loop it shrinks to the border width, at abound point it'll no T 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 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 a picture or flash that is larger than a browser window.