CSS Development experience

1. Try to define the style with class. Use as little as possible. Div1 ul li{} This style goes on, because if Li also has <div><ul><li> these elements will cause interference, should give UL a class such as <ul class= "UL1" ></ul> write like this.

2.margin:0px Auto; Center settings for content that is compatible with different resolutions.

3. Share a very useful CSS image merge site, he is able to merge the user's uploaded images into a large picture at once, but also to generate the background of each picture, for reducing the HTTP request is very helpful.

http://cn.spritegen.website-performance.org/

4. If Float:left is used, the float:left can be used with float:left. Otherwise, it is cumbersome when the HTML structure is unreasonable.

5. Absolute positioning, as far as possible to find the nearest parent element as the positioning datum, so as to better compatible with the resolution and other issues. and the browser will not move.

6. Today solves a beautification problem that beautify a file form element, really is a lot of problems, hereby make a record.

As requested by the company, the upload form should be designed to have only one button and not be able to display the preceding text box.

Tried to hide <input type=file>, and then triggered a click event of file through a div, so that although the file Form element is able to get to the path, but at the time of submission, IE is not allowed to commit, but after the file element is displayed, Click the Browse button to select the path but can submit. Therefore, a conclusion is obtained without strict verification. The file form element under IE, be sure to submit the form by the path selected by the mouse to actually click the browse button. So I abandoned this method.

Since you IE must have the mouse really click to be able to submit the form? OK, then I will set the input file to be transparent, cover the background graph above, and then adjust the size of the browse button after the font adjustment, the size of the browse button is just right to cover the background picture, so perfect. Code does not paste up, just upload a demo program, later forgot to download here.

Demo Address

7, Z-index description.

In IE, for the positioning element, it is not simple than z-index who is larger and smaller than the size of its parent element. The picture is copied from a cow in the garden. The original address is: http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html, you can see in IE, is to compare the z-index of the parent element, and then compare the child elements under the same parent element. The picture has been clearly stated. As long as your parent element z-index not large enough, no matter how big your z-index is, it will not cover the child elements of other elements that are higher than the parent element.

8, in the layout, do not set the width, and then to deal with what Padding,border,margin and so on. Because the width is fixed, if you add padding,border,margin by this width, the box actually occupies a distance of padding + border + margin + content.

9, Cursot the problem of the custom cursor attention

Css:{cursor:url (' Picture of Absolute path (format: Cur,ico) '),-moz-zoom-out;} FF below
Css:{cursor:url (' absolute path '), auto;} Ie,ff,chrome Browser can be the front URL is a custom mouse format, the absolute path address of the image, the following parameters are the CSS standard cursor style, (ie can not be required below) the format of the icon according to different browsers: IE support Cur,ani, Ico these three formats, FF supports bmp,gif,jpg,cur,ico these formats, does not support the ANI format, and does not support the GIF animation format, so generally save the picture as a cur or ico format is better, if it is ANI format, then you can use JPG under FF, Gif,bmp to replace (Cursor:url (... ani), url (... gif), auto) There are a few more points to note: 1. The image is the absolute path, 2. The image size is preferably the size of the 32*32, Anyway, under each browser the size of the resolution is different 10, today encountered a strange problem, Google,ie browser under this code:

                    <TD width= "120px" >                        <a>xxx</a>                    </td>                    <td> <a>xxx</a>
   
    </td>                    <td width= "50px" > <a>xxx</a>
    
</td>   
   

Would have been 3 TD, one day, suddenly the middle of the added a very long a content, the result in Google will be the entire table is big.

Later in the middle of the TD added a style= "word-break:break-all;" It's done.

11, IE7 the problem of the filter:

Let's take a look at the following section of the code below in IE7 with Google browser differences:

First look at Google's performance:
　　
IE7 's performance:
　　
The main problem here is that when a div is set to Filter:alpha (OPACITY=90), after the property, all things that go beyond the div boundary are automatically hidden under IE7. For the time being I haven't found a way to solve it.
But there is a detour:
1. The content that will be displayed across the bounds is moved outside the Div where filter is set, and then moved to the appropriate position with relative offsets.
2, add this sentence code *filter:; The transparency effect is not enabled under IE7. Does not affect other browsers.
12. The difference between Dispaly:none and Visibility:hidden
Dispaly:none; CSS1 hidden objects. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden.
Visibility: hidden; Sets or retrieves whether the object is displayed. Unlike the display property, this property retains the physical space it occupies for hidden objects. If you want the object to be visual, its parent object must also be visible.