Browser compatibility has always been a common problem in the CSS layout. As a result, beginners have entered a lot of misunderstandings. Then, through my experience, we summarize two methods to avoid most browser compatibility issues.
These two methods have the following advantages:
1. No need to use hack
2. Simple and effective, you can do it at a glance
3. Hierarchical and modular layout
4. The code is more reasonable and easier to identify
Method 1: Solve floating misalignment caused by adding internal and external spacing
We usually need to use Float to float when the multi -column layout. Usually we write 3 DIVs for 3 column layouts. We hope to achieve the following effects:
In order to achieve this effect, we will add margin to make the column directly from spacing, and also add borders, and padding so that the text inside will not stick to the border. But an unexpected situation happened. After the code was written, the following situation actually occurred:
In the third column, run to the bottom. This is not the effect you want. Then let’s analyze it. According to general ideas. The overall width is 800px, the left column is 200, the middle 400, and the right column is 200, which looks good, but there must be spacing between these columns, so you need to change it: left column 190, middle 400, and right column 190. Is it OK?
But for the sake of good looks, you added borders. But I forgot that the border will also increase the width. In addition, you have added padding:10px of the column; I'm dizzy, then the actual width will become: left column: width 200-outer spacing 10-inner spacing 20-border 2=168 , so as not to misalign. But don’t you find it a bit complicated? Maybe you need to have a calculator. There will be a gap in such a layout of some browsers.
Okay, let's talk about my method. According to the hierarchy, I separate the layout and the display. The layout is that in addition to the width and floating outer pitch, the layout is easier to calculate. Then we add a DIV in the column of the layout to display the border, the internal and external spacing, etc. You can not need to define the width, you can adapt. To facilitate your memory, I improvised a poem: Fixed width should be floating, without borders or patches, put a DIV inside, and define the style to work!
Method 2: Solve the internal floating elements from the outer layer
In order to create a product catalog or picture album, we used UL or N DIVs to float. The desired effect is as follows:
But things are contrary to their wishes. Recently, the following looks, the outer frame ran to it:
The solution to this is actually very simple.
1. You can add a float:left; to the outer layer to solve the problem.
2. Another method is to place a DIV to clear the floating at the end after the float is over.
3. Add height or width to the outer layer.