Summary of some recent projects on refactoring

1. There is a blank bug in the background image when width: 100% is reduced. The problem was not solved after half a day of searching, and the minimum width was added to solve the problem,

Example: <div class = "top">

<Div class = "tpInner"> </div>

</Div>

 

. Top {width: 100%;

Height: 30px;

Backgroud: # ccc;

Min-width: 980px; // solve the blank background Problem

}

. TpInner {width: 980px; margin: 0 auto ;}

 

 

2. the banner large background image in the topic is vertically centered and becomes blank as the browser shrinks,

 

 

<Div class = "banner"> </div>

. Banner {backgroud: url(banner.jpg) no-repeat center top; width: 100%; height: pixel ;}

 

Solution:

Add a div in. banner and set the minimum width for. banner. Add the div in. banner to the width and center.

 

. Banner {backgroud: url(banner.jpg) no-repeat center top; width: 100%; min-width: pixel ;}

. Bannder div {width: pixel PX; margin: 0 atuo ;}

 

3. About the padding of the button in IE6,

Add a background image to the button. in ie6 and ie7, the padding is increased to make the button longer than expected,

Finally, I checked the information. The solution is to add overflow: visible to the button style;

 

4. about adding a background image to input [type = submit], the black border problem occurs in ie6 and ie7.

The solution is to add a tag outside the input tag, reset the default input style, and add the style and background image to the tag outside the input,

Another method is to use a filter.

Input [type = submit],
Input [type = reset],
Input [type = button] {
Filter: chroma (color = #000000 );
}

 

5. Solutions for layers not covering textarea and select

Use the iframe frame to simulate the same div width and height as the display.