CSS in IE and Nascape display differences
Web builders to deal with the most difficult situation is one: the same CSS code was different browser explanation will generate different results. Previously, a variety of browsers generation is very different pages can be seen everywhere, and now we can use the so-called standard browser achieve a better result. However, the results show that the difference is unavoidable.
Currently in a leadership position in dealing with some browsers floating effect on the existence of such differences. If anyone would like to build a browser window with the size of the dynamic changes in the size of the multi-column layout, then this will be a particularly thorny issue.
No floating simple pages
Suppose you have two div - div div # # one and two, they have a fixed width. If there is no floating or absolute positioning, div will be another one on the pile in the form of on the left side of the browser window (such as the case of A below), because the standard pages for the order from left to right , from top to bottom, block-level elements (block-level element) will be below the previous element immediately start a new line.
Below are examples of all the needs of a section of HTML:
<body>
<div Id="one">
Port side text …
</ Div>
<div Id="two">
Second column text …
</ Div>
</ Body>
Below the CSS code for the basic, non-floating version:
# (Div one
Width: 150px;
Margin: 0px;
Background-color: red;
)
(Div # two
Width: 300px;
Padding: 0px 10px 5px 10px;
Margin: 0px;
Background-color: silver;
)
The basic floating
When you create a float include: left or float: right attributes CSS style, and it is applied to such a label such as div elements of the block-level, div will be from ordinary text documents in order for the deletion, and forced into contain elements (containing element) to the left or right. If a main element is a label, then div will float to the side of the browser window. Otherwise, the floating div will be moved to the brink of containing div, in the past, is not the case.
If you have more than one floating element, then the second and subsequent floating elements will follow a first line, much like its arrangement of the text in his letter. A series of floating elements will Qi Cheng and his party, for shoring up the entire browser window width, and then for the next line, like paragraphs in the text as arranged.
Fixed width of the floating
As long as div div # # one and two have a fixed width, and the total width is less than the width of the browser window, they would like the case of B, as shown next to the row together. Several major browser floating in dealing with the fixed width of the way to maintain a considerable consistency. Below the CSS code generated by the pages in IE6, Netscape 7, Mozilla and Opera 7, a show is exactly the same.
# (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;
)
Variable width of the floating brought variable results
When you want to become div width variable, inconsistent results generated floating on the surface of the problem. For example, suppose you want to put in the pages of a fixed width of the left column, a list of buttons for navigation, and would like to put another one in the right column, under the browser window it (the size of) the expansion and contraction .
You might think that his own left floating div two will be able to achieve this effect is a fixed width, and another set to the width automatically to div automatically adjust the size, so that it can fill a div and browse of the gap between the right window. Cases of C code is shown below:
# (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 in IE that this example, you will be expected effect that the left is a fixed width of the column, next to the right of it is a variable width of the column, but the same code in other popular browsers , but it will generate different results. The second will be div fell below the first, and then this trip is not on the right side. Results and without floating on the pages are very similar.
Solutions
To obtain this two columns layout, which can automatically adjust the column size of the desired effect of a solution is the use of floating div first column, but from the need to adjust the size of the box that floating deleted. The floating column and the general arrangement of the document is the order of separation, conventional div will be on the top, but in the bottom of the floating div. Add a padding on the left, and allowed to float div equal to the width, and the contents of conventional div will look like on the left side of the right of a column div. D note of this technique. The following code to all current generation browser, the same effect.
# (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 more in line with standards than IE, but I personally think that IE generate the effect of floating elements than the previous two browser more consistent. But if we do not consider the effect of which is generating a "right", then the difference will bring to the construction of the Web headache. To avoid your page design problems generated by the browser that will be different results is the first step and the most important step.
Switched from: zdnetchina
Tags: css display, Display
Leave a Reply