10 Common CSS bug solutions and tips

10 of the most common CSS bug solutions and tips-browser compatibility tutorials

CSS bugs are the most vexing problem in a layout. We need to take care of a variety of browsers to expect consistent results.
It is very regrettable that the competition among the manufacturers has led to many problems. and IE6 and IE7 on many issues are also a big difference.
Easy solution to CSS Bugs is a skill we must master. Now sort out the 12 most common CSS bug fixes and tips for CSS bug classes.
Hope to help you with your study and work, if you still have questions,

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:

#content-box { width:300px; height:150px; }

* HTML #content-box { width:250px; }

Second, let IE6 support PNG transparent

a IE6 bug caused a lot of trouble and he didn't support transparent PNG pictures.
You need to use a CSS filter

*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 on a hyperlink will appear in the periphery of a dashed outline. This is easy to fix, just add in the label style:

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

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.

#wrapper { Margin:auto; position:relative; }

Seven, IE6 double margin Bug

adding Display:inline to this object solves the problem.

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

Html: Css: H1 {Background:url (heading-image.gif) no-repeat;} H1 span { Position:absolute; Text-indent: -5000px; }

You can see that we used the standard Turn off the CSS and see what the head looks like.

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

. container { min-width:300px; }

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

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

Then you need to define the Min-width attribute of the outer Div,

. container { min-width:300px; }

This is the time for IE hack. You need to include the following 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 until it shrinks to the border width, at which point It won'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.

Ten, hidden horizontal scroll bar

To avoid horizontal scroll bars, add Overflow-x:hidden to the body.

Body {overflow-x: hidden;}

This technique is useful when you decide to use a picture or flash that is larger than a browser window.