Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you what are the small details about the front-end development of the web page. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

1 select label must be closed

2 when laying out around, you can let one side float, the floating side sets the width, and the other side sets the actual margin of the margin=float side's width+, as shown below:

.top .top _ left {width:250px; float:left; height:500px;}

.top .top _ right {height:500px; margin-left:260px;}

But in this way, 3px bug will appear under IE6, so you can use hack, that is, the best way to * margin-left:257px; is to let .top _ right also float, so that it will clean up the 3px bug, that is, double floats.

3 if the width of the container is set to be smaller than the width of the content, it will be displayed normally in modern browsers, and the excess content can also be displayed, but the container will not be enlarged under IE6, because the width under IE6 is min-width, so the container will be stretched open, so there will be problems based on the absolute relative positioning of the container and margin. The solution is not to set the width of the container or to set a width greater than or equal to the maximum width of the content

4! The important code is as follows:

# a {margin LeftVue 30pximportant; margin-left:20px;}

In the above example, layer an is in IE6.0 with a left margin of 20 pixels, while in Firefox, the left margin becomes 30 pixels. This is because,! important represents a priority call in CSS, and because IE does not recognize this attribute, only the option "margin-left:20px;" can be called in IE, so the same piece of code will show different styles in Firefox and IE.

5 compatibility-the bottom 3px bug of the li element under IE6/7

Under IE6, 7, if a li contains floating elements, then the li will be more than the bottom margin of the 3px. There are two solutions.

One: add a float attribute to li. The attribute value can be any value except none.

Second: add a vertical-align attribute to li. The attribute value can be any value.

From the essence of solving the problem, there is no difference between the two methods, both are by adding the corresponding css attribute to activate the haslayout of li, but method 2 is more suitable to solve this problem, because once a float is added to the li, it is bound to be cleared, which is a thorny problem. Although there are many ways to solve the trouble caused by floating, it virtually increases the load of the code, which we do not want to see. So it is recommended to use method 2.

6 often encounter a layout of about two div heights, both of which set the height, but the height of one of the div is stretched out in the IE6, that is because the height set under IE6 is equivalent to the minimum height, while the setting height under ff is as much as it is, so the IE6 will spread out, and the solution is to add an overflow:hidden to the div.

These are the small details of the web front-end development shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.