div css browser compatible

Compatibility issues are everywhere, don't set your standards too high during the learning stage, take your time. Even if it is big**, there are also compatibility problems, such as Sina Mail cannot be used with chorme (I don't know if the current version supports it), and many online banking payments cannot be used in non-IE browsers.

In fact, this problem is very normal, you only need to use the knowledge you know to slowly debug, try more, practice more, and slowly find the use of certain CSS attributes, to put it bluntly, to solve the compatibility problem or need basic CSS skills.

Once you're proficient with CSS attributes, you can focus on CSS hacks. But don't focus on it just yet, it's just a means, and it's always good to avoid hacks as much as possible.

A div set to float will have a double margin set under IE. This is a bug that exists in IE6. The solution is to add display:inline to this div;

*Here we will talk about the two elements of block and inline***

The block element is characterized by always starting on a new line, and the height, width, row height, and margins can all be controlled (block element); The inline element is characterized by being on the same line as other elements and cannot be controlled (embedded elements); #boxhtml

Compatible with: background:blue; /*ff、op、ch*/background:

red \9; /*ie8*/background:black; /*ie7*/background:orange;*ie6* above** you need to draw inferences yourself, such as:

width:105px; /*ff、op、ch*/width:107px \9; /*ie8*/width:105px; /*ie7*/

width:105px; /*ie6*/

There are many compatible methods, and this method is more convenient to read. With this in mind, you'll be able to deal with all the compatibility issues caused by size and positioning differences. Other compatibility with double floating edges, cleaning up floating, etc., must be used in other ways.

The 2nd floor is the solution.,It's very detailed.,Debug it in the browser after you finish the web page.,If it's deformed, use the ** on the 2nd floor to start with a CSS.,It's good.。

The so-called incompatibility is largely a difference in the initial values. For example, in the default div layer. Different browsers have default padding values and other property values, so I'll do an example as follows: body

div,form,img,ul,li,p,span

When you make a mistake with CSS layout, it's easy to see the problem by just showing the border of the layer. It is also important to note that the layer has floats and must be cleared. When I first started doing this, I looked at the source ** of NetEase's homepage, and then flipped through the API help documentation to see the properties I didn't understand.

It will solve the problem in no time.

Method steps.

Different browsers have different definitions of the padding attribute that HTML markup has.

So if you want to close this gap, you should add the following CSS to the corresponding CSS section:

In this way, the padding of all markers is unified.

Priority Issues:

There are different priorities for values given for the same tag attribute. The highest priority is inline**, which is actually the in-page CSS, followed by the browser defaults, and finally the restrictions made by the external CSS.

Margin inconsistencies:

When there are multiple **s that need to be arranged in one line, we usually use "float:left" to do so, which makes the browser have compatibility problems. This causes the margin to be inconsistent with the following content.

div centering issue:

Usually we use "vertical-align:middle" to achieve this, which is normal for Sogou browser, but for IE browser, it has no effect. A good solution to this is:

If you set the line height of the text to the same as the div, you can solve the problem.

Inner and outer borders merge issue. Normally, for two related divs, the margin merging principle is used when they are adjacent, and the result is that only the maximum margin value of the two divs is the spacing between the two divs. The spacing between the two contained divs follows the same rules.

With this rule in mind, we can be more comfortable when using div blocks for layout.

Many layouts now don't use tables. Because table is cumbersome to tune.

It's not as fast and convenient as div. If you want to lay out the landlord, it is recommended that you use div+css

**Only some are used when making forms. Basically, it's rarely used. Not recommended here**.

Browser compatibility solutions are not a matter of one or two sentences! Tables are used to nest more complex forms. divs and css for typography!

The purpose of CSSHACK is to make your CSS compatible with different browsers. We can also use CSSHACK to customize different CSS effects for different versions of browsers.

There are no shortcuts, compatibility is gained through experience. In the early stage, it is recommended to buy a CSS book system to learn, and when you write a sentence of CSS, test it with different browsers, and modify the CSS immediately if it is incompatible. Follow the norm and remember to do the right thing with the right label, and do the most with the least label.

position：absolute；This is absolute positioning.

To put it simply, the purpose of CSShack is to make your CSS** compatible with different browsers. Of course, we can also use CSSHACK to customize different CSS effects for different versions of browsers.

In order to adapt CSS to all browsers, it is necessary to use JS to determine the browser and resolution in order to be compatible with all browsers. All the effects of blind acres of celery will not change.

The effect of tabs rendering varies from browser to browser. So on the small side, I'm going to talk about how to make CSS tags compatible with different browsers.

As a tag of block-level elements, when writing CSS files, it is better to define the line height line-height, not the height of the height, because defining the height limits the height of the block-level element, in different browsers, it is difficult to achieve a more uniform effect, I have encountered, in IE6, Firefox (FF) effect is intact, and in IE7, the text of the title is only half out. And the title will have different line requirements in different layouts, such as in small places such as the sidebar, the title is likely to have 2 or 3 lines, if the height is defined, then most browsers will have the wrong display, very crowded or no display, if the bottom edge is set, it may also be misplaced.

Therefore, it is better not to define the height, but be sure to define the line-height, and other values, according to the actual effect. In this way, the compatibility with different browsers is the best.

h3Font size, color, font control

h1Height and width control

h1Control of row height

h1The control of the text alignment can be left, right, center.

h1Control of borders

h1Background controlh1