One of the most difficult cases for Web builders is that the same CSS Code is interpreted by different browsers to produce different results. In the past, a variety of different browsers generated extremely different pages are everywhere, and now we can use the so-called standard browser to get better results. However, the difference in the display effect cannot be avoided.
Some leading browsers have such differences in handling floating effects. If someone wants to create a layout that can dynamically change the size of multiple columns as the size of the browser window changes, this will be a particularly troublesome issue.
Simple non-floating page
Suppose you have two divs --Div # OneAndDiv # Two, They all have fixed width. Without floating or absolute positioning, these divs will be placed on the left side of the browser window in the form of one stacked on the other (suchExampleAs shown in), because the standard page arrangement order is from left to right, from top to bottom, block-level elements will start a new row next to the previous element.
Below is a piece of HTML required for all examples:
<Body>
<Div id = "one">
Port side text...
</Div>
<Div id = "two">
Second column text...
</Div>
</Body>
The following CSS code is used for basic, non-floating versions:
Div # One {
Width: 150px;
Margin: 0px;
Background-color: red;
}
Div # Two {
Width: 300px;
Padding: 0px 10px 5px 10px;
Margin: 0px;
Background-color: Silver;
}
When you createFloat: leftOrFloat: RightWhen the CSS style of the attribute is applied to block-level elements such as Div labels, the DIV will be deleted from the general text arrangement order of the document, it is forcibly placed on the left or right side of the containing element. If an element is a subject tag, the DIV will float to the side of the browser window. Otherwise, the floating Div will move to the edge that contains the DIV, which is not previously the case.
If you have more than one floating element, the second and subsequent floating elements will be arranged in a line following the first one. The arrangement is very similar to a line of letters in the text. A series of floating elements are aligned into one line until the entire width of the browser window is filled, and then changed to the next line, arranged as the text in the paragraph.
As longDiv # OneAndDiv # TwoWith a fixed width, and its total width is smaller than the width of the browser window, they will be likeExample BAs shown in. Several large browsers maintain consistent processing of Fixed-width fluctuations. The pages generated by the following CSS code are exactly the same in IE6, Netscape 7, Mozilla 1, and opera 7.
Div # One {
Float: left;
Width: 150px;
Margin: 0px;
Background-color: red;
}
Div # Two {
Float: left;
Width: 300px;
Padding: 0px 10px 5px 10px;
Margin: 0px;
Background-color: Silver;
}
When you want to change the DIV to a variable width, the issue of inconsistent floating effects will emerge. For example, if you want to place a fixed-width column on the left of the page for the navigation button list, and you want to place another column on the right, let it according to the browser window (size) free scaling.
You may think that you can achieve this by using two left-side floating div; one is fixed width, and the other is Set width to automatic, so that the DIV can be adjusted automatically, in this way, it can fill in the gap between the first Div and the right side of the browser window.Example CIs the result of the following code:
Div # One {
Float: left;
Width: 150px;
Margin: 0px;
Background-color: red;
}
Div # Two {
Float: left;
Width: auto;
Padding: 0px 10px 5px 10px;
Margin: 0px;
Background-color: Silver;
}
If you show this example in IE, you will get the expected effect, that is, the left side is a fixed-width column, and the right side is a variable-width column; however, the same Code generates different results on other popular browsers. The second Div will fall below the first Div, instead of placing this row on the right. The result is very similar to a page without floating.
SolutionOne ideal solution for automatically resizing one of the two column la S is to use a floating Div for the first column, however, the floating point must be removed from the column where the size must be adjusted. Because the floating bar is separated from the general document arrangement order, the general Div will be placed above, but below the floating Div. Add a padding on the left and make it equal to the width of the floating Div. The content of the regular Div looks like it is placed in a column on the right of the Left Div.Example DExplains this technique. The following code can generate the same effect in all current browsers.
Div # One {
Float: left;
Width: 150px;
Margin: 0px;
Background-color: red;
}
Div # Two {
Width: auto;
Padding: 0px 10px 5px 160px;
Margin: 0px;
Background-color: Silver;
}
Although the current Netscape/Mozilla browsers are generally considered to be more compliant with the standard than IE, I personally think that the effect of generating floating elements in IE is more consistent than that in the first two browsers. However, if you do not consider which generated results are "correct", the difference will cause the greatest headache for Web builders. To avoid problems with your page design, it is the first and most important step to know the effect of browser generation.
Transferred from: zdnetchina
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
