Browser compatibility has always been a common problem in CSS layout, and beginners have encountered many misunderstandings because of this. So through my experience, I have summarized 2 methods to avoid most browser compatibility problems.
These two methods have the following advantages:
1. No need to use HACK
2. Simple and effective, you can understand it at a glance
3. Hierarchical and modular layout
4. The code is more reasonable and easier to identify
Method 1: Solve the floating misalignment caused by adding internal and external spacing
We usually need to use float to float DIVs in multi-column layouts. Usually we will write 3 DIVs for 3-column layout. We hope to achieve the following effects:
.gif)
In order to achieve this effect, we will add margin to allow the column to be directly spaced, and also add a border, plus padding to prevent the text inside from sticking to the border. But something unexpected happened. After the code was written, the following situation occurred:
.gif)
The third column ran below. This is not the effect you want. So let’s analyze it. Follow the general idea. The overall width is 800px, 200px for the left column, 400px for the middle column, and 200px for the right column. This looks good, but there needs to be a gap between these columns, so you have to change it: 190px for the left column, 400px for the middle column, and 190px for the right column. Is that OK?
But to make it look better, you add a border. But I forgot that the border will also increase the width. In addition, you increased the padding of the column: 10px; I am confused, so the actual width becomes: left column: width 200-outer spacing 10-inner spacing 20-border 2=168 , so that there will be no misalignment. But don’t you think this is a bit complicated? Maybe you need a calculator. There will be differences in the display of some browsers with this layout.
Okay, let’s talk about my method. According to the hierarchical division, I separate the layout and display. The layout means that in addition to the width and float, the layout adds at most an outer spacing, so that it is easier for me to calculate. Then we add another DIV to the layout column specifically for displaying borders, internal and external spacing, etc. You don't need to define the width, just adapt it. In order to make it easier for you to remember, I improvised a poem: fixed width should be floating, no borders or patches, put a DIV inside, and the defined style will work!
Method 2: Solve the problem of inner floating elements detaching from the outer layer
In order to make a product catalog or picture album, we use UL or N DIVs to float. The desired effect is as follows:
.gif)
But it backfired. Recently, the display looks like the following, and the outer border has moved to the top:
.gif)
The solution to this problem 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 at the end to clear the float after the float ends.
3. Add height or width to the outer layer.