Layout common types of compatibility issues

1. double floating Bug

    Description : block element disposed after float, and a set of lateral margin, margin value displayed in IE6 larger than the set value;

    Solution : to set the float element to add display: inline;

2. Form line height inconsistencies

    Solution :

         : to add form elements float property;

         : to form elements to add vertical-align: middle;

 

3. does not recognize the smaller height of the container in IE6 (generally less than 10px)

    Solution :

        ①: a container add overflow: hidden;

        ②: a container add font-size: 0;

 

4. nested img tag in a tag, the picture will be in some browsers the border

    Solution : to add an img tag border: none; or border: 0;

 

The minimum height is not compatible min-height in IE6

    solution:

        Option One:

 

        Option II:

 

6. By default there are gaps Pictures

    solution:

        ①: to add a picture float property;

        ②: to add a picture display: block;

 

7. Percentage BUG

    Description: two width of 50% after left floating element, greater than 100% of the parent element;

    Solution: to the right floating elements are added clear: right;

 

8. mouse pointer BUG

    Description: the Cursor: Hand; only low version of the IE browser support;

    Solution: the Cursor: pointer; all browsers support;

    NOTE: Cursor to set the shape of the mouse pointer;

 

9. Low IE browser version does not recognize opacity property

    solution:

 

10. The vertically overlap margin

    Description: to an element disposed on top of margin-bottom, the following elements to set margin-top, only the browser will recognize the larger that value;

    solution:

        ①: margin and margin-bottom-Top provided only one of the values;

        ②: to an element in which a parent container sleeve, and set overflow: hidden;

 

11 to the sub-element is provided in the margin-top application on the parent element (leave the decree)

    solution:

        ①: the margin-top element to the sub-set is provided to the parent element to padding-top

        ②: the parent element is set float: left / right; trigger BFC

        ③: a parent element disposed overflow: hidden; trigger BFC

        ④: to a parent element to a transparent border 1px border-top: 1px solid transparent;

    PS: Set transparent border

12. Default button sizes

    solution:

        ①: If the design draft of a button is a picture directly to the button you can set the background image;

        ②: using a button tag simulation;

Recommended front-end blog: http://www.sharedblog.cn/?sort=5&page=2

 

Guess you like

Origin www.cnblogs.com/captainMforlife/p/11301294.html