12 Kinds of CSS bug solutions and tips

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

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 leads to many problems. and IE6 and IE7 on many issues are also a big difference. This content is also included in 52css.com's extensive technical documentation. 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 your study, work helps, if you still have questions, welcome you to 52css.com Lookup, search related content.

One, browser-specific selector

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

IE6 and its lower version, this article by 52css.com collation, reprint please specify the source!

* 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 [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: Introduction to browser-specific selectors

http://www.52css.com/article.asp?id=635

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 [www.52css.com]*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 [Www.52css.com]outline:none.

A{outline:none;

You can also refer to-dotted boxes except for link elements (compatible IE7, IE6, FF)

http://www.52css.com/article.asp?id=743

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> and block elements including div;, <p>, <h1> <form> and <li> You cannot define the width of the elements in the row, in order to solve this problem you can change the inline elements into block elements. Example Source Code [Www.52css.com]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 [www.52css.com] #wrapper {margin:auto;position:relative;}

Six, IE6 double margin Bug

Adding Display:inline to this object solves the problem. Specific introduction:

http://www.52css.com/article.asp?id=144

General solution to the Bug in box model box

This is a notorious question, for details refer here:

http://www.52css.com/article.asp?id=106

3px gap between eight and two layers

The legendary "IE 3px Bug", the solution:

http://www.52css.com/article.asp?id=146

Ix. HTML annotations in IE cause strange copying of text

Duplicate Characters bugs are amazing, specific solutions:

http://www.52css.com/article.asp?id=440

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 [www.52css.com]html:

Main Heading One

CSS:

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

H1 span {position:absolute;text-indent: -5000px}

You can see that we used the standard for the title

As a label and use CSS to replace text with a 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 [Www.52css.com].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 [www.52css.com]

Content

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 [Www.52css.com].container {min-width:300px;}

This is the time for IE hack. 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 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 [www.52css.com]body {overflow-x: hidden;}

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