Small details of web front-end development

1 The select tag must be closed <select></select>

2 When laying out on the left and right, you can let one side float, set the width of the floating side, and set the margin of the other side to be the width of the floating side + the actual margin, as shown below:

.top .top_left{width:250px; float:left; height:500px;}
.top .top_right{height:500px; margin-left:260px;}

But this will cause a 3px bug in IE6. You can use a hack, that is, *margin-left:257px; the best way is to let .top_right also float, so that it will clear the 3px bug, that is, double float for width setting

3 If the width of the container is set smaller than the width of the content, it will display normally in modern browsers, and the content exceeding the width can still be displayed, and the container will not expand. However, this is not the case in IE6, because the width in IE6 is min-width, so the container will be stretched, and the absolute relative positioning and margin based on this container will have problems. The solution is to not set the width of the container or set the width to be greater than or equal to the maximum width of the content.

4 !important The following code:

#a{margin-left:30px!important; margin-left:20px;}

In the above example, the left margin of layer a is 20 pixels in IE6.0, while in Firefox, the left margin becomes 30 pixels. This is because !important means priority in CSS. Since IE cannot recognize this attribute, only the option "margin-left:20px;" can be called in IE. Therefore, the same code will display different styles in Firefox and IE.

5 Compatibility-------3px bug at the bottom of li element in IE6/7

In IE6 and 7, if a li contains a floating element, the li will have an extra 3px bottom margin. There are two solutions:

1: Add a float attribute to li. The attribute value can be any value except none.

2. Add the vertical-align attribute to li. The attribute value can be any value.

In terms of solving the problem, there is no difference between these two methods. Both methods stimulate the haslayout of li by adding corresponding CSS attributes. However, method 2 is more suitable to solve this problem because once floating is added to li, it must be cleared. This is a tricky problem. Although there are many ways to solve the troubles caused by floating, it invisibly increases the burden of the code, which is what we don’t want to see, so method 2 is recommended.

6 Often you will encounter a layout where two divs on the left and right are of equal height. Both divs have their heights set, but the height of one div is stretched in IE6. This is because the height set in IE6 is equivalent to the minimum height, while the height set in FF is the same as the minimum height, so IE6 will stretch it. The solution is to add overflow: hidden to the div.

<<: Detailed explanation of custom events of Vue components

>>: A brief discussion on the design of Tomcat multi-layer container