CSS div IE6, IE7, Firefox compatibility issues

You can memorize how to write hacks for different browsers, and you can easily deal with compatibility issues with each browser

hackstyle{

color:gray;*ff is grayed out in the browser, because it will automatically ignore it if it does not recognize the following writings

color:red;\9;*Backslash 9, applicable to all versions of IE, IE8 is shown in red*

color:blue;*The asterisk in front of it can only be recognized by IE7, so IE7 is shown in blue*

color:green;*The underscore in front of it can only be recognized by IE6, so IE6 will show green*

The margin property is doubled in IE6, e.g. margin-left: 10px; In IE7 it is 10 pixels on the left margin, but in IE6 it is 20 pixels, so I usually write it as margin-left:10px !

important;margin-left:5px

This means that IE7 will margin-left: 10px; IE6margin-left: 5px encountered

I don't know if you understand it!

In IE6, when using both float and margin, you should add display:inline; IE7 and FF are okay, if it really can't be tuned, then use the so-called hack method, eg: head for IE6, * for IE7, so that you can separate it!!

You send me what you wrote, and I'll fix it for you, and copy the useless ones that don't work

First of all, the order of debugging browser compatibility problems is: FF - >IE8 - >IE7 - >IE6 (our company only does FF and IE compatibility, so I only say these.) ）

Roughly, if there is no problem with FF, there will be no problem with IE8.

The ** that distinguishes IE6, IE7, and IE8 is:

classname

Pay attention to the order of writing, you can distinguish ie8, ie7, ie6!!

However, if ** is well written, generally only IE6 needs to be adjusted, that is, generally only the symbol " " " will be used

Without further ado, I hope it helps.

They have multiple compatibility issues, I don't know what you said.

9 Property selectors (this is not compatible, it is a bug in hiding CSS).

p[id]This is hidden for and the following versions,FF and opera。

There is still a difference between a property selector and a sub-selector, the range of the sub-selector is narrowed in terms of form, and the range of the property selector is relatively large, such as in p[id], all the id in the p tag are the same.

10 ie hide and seek questions.

When the div application is complicated, there are some links in each column, and the div is prone to hide-and-seek problems at this time.

Some content is not displayed, and when the mouse selects this area, it is found that the content is indeed on the page.

Workaround: Use the line-height attribute for the layout or use fixed height and width for the layout. Keep the page structure as simple as possible.

11 Height maladaptation.

Height incompatibility is when the height of the inner object changes and the outer height cannot be adjusted automatically, especially when the inner object is used.

margin or paddign.

Example: The contents of the p-object.

css：#box

#box p

Solution: Add 2 empty div objects CSS**:1 Or add the border attribute to the div.

Common to all browsers.

height: 100px;

IE6 exclusive.

height: 100px;

IE6 exclusive.

height: 100px;

IE7 exclusive.

height: 100px;

IE7, FF shared.

height: 100px !important;

IE6 is the most special existence in the IE version.,There are more differences.,There are more bugs.,Otherwise, you give me **.,I'll show you?

I didn't see it**It's hard to say, you go to the blue classic forum and ask.

CSS compatibility problem, just search for IE compatibility to find a solution.

There should be two aspects to the performance alone:

1.As for styling, IE6 defaults to a minimum height for divs, even though you wrote height="2px",But in fact, the height of IE6 will be greater than 2px,So IE6 height is by default.,You write this is the background, so it's not right.,First of all, you have to add overflow:hidden to this div at 4 points.,So that you write 2px height can be 2px height.,Beyond it will not be displayed.。

**IE6 incompatibility issues. I'm guessing your 4-point background image should be. PNG format, IE6 is not compatible with PNG, IE6 will fill in the transparent part with the nearby background color.

There are two solutions, the first is to replace ** with gif, this method is the fastest, and the only thing to deal with is the jagged tooth of the next **, because the gif has a poor recognition of the gradient effect. The second method is compatible with JS IE6, you search for PNG compatible with IE6 on the Internet, which should have JS compatibility methods, you can copy it.

Satisfied give satisfactory answers. Thank you.

Hello! We're happy to answer your questions!

There is a lot of content involved in this, you can refer to it.

Put this ** in it,The page in IE8 is exactly the same as IE7.,So,Basically, you can ignore IE8.,The rest** just need to be written like this.。

background:#ffc;*Valid for Firefox*

background:#ccc;Valid for IE7

background:#000;*Valid for IE6 only*

Explain it :

Firefox can parse the first paragraph, and the last two are preceded by special symbols "*" and " "Firefox can't recognize it, so it only recognizes background: ffc, and you see yellow;

IE7 can recognize the first two shorts, and the last one shall prevail, so the final analysis is background: ccc, and the gray is seen;

IE6 can recognize all three paragraphs, and " "This is only recognized by IE6, so the final analysis is background: 000, and what you see is black.

First question:

I didn't notice that your word is in**.,This font is different because of the problem of IE.,IE has a problem when inheriting ** font.,You need to specify the font directly.。 Such as: TD

Second question:

text-align：center;Even in FF, you can center the text (see the picture), and the centering is to set the width value and then set the left and right margins to auto.

The third question:

Set the td to the last td submitted as a form.

1 The font problem is on the 2nd floor.

2 What you are typing in ** is not plain text and cannot be used.

text-align

You can use margin:0 auto;

3 You're using floating, I suggest you say goodbye to a layer, the css of the layer is set to clear:both;

This is too much.,If you debug a web page, you can debug it directly in FF.,And then debug it a little more in IE8.,These two are displayed normally and then almost adapt to all browsers.。

As for the hacks of various browsers, there are too many to remember.

Debugging with IE8, see the effect in compatibility mode and non-compatibility mode respectively, it is almost good.

IE6 go die, die.