Some compatibility issues encountered during source web development

The front end training course ends immediately, facing to go out to look for a job, here summarizes the knowledge which learns, also records oneself to look for the work situation and some interview experience. Hope to be able to persist, so that they can improve ...

First of all, in the front-end development process is easy to encounter some compatibility issues.

1, block property label float, if there is a horizontal margin property, the IE6 display margin is larger than the value set.

Solution: Add the Display:inline property to the elements of float to convert it into inline elements.

2, set a small height of the label (generally less than 10px), in IE6, IE7, travel in height beyond their own set height.

Solution: Add the Overflow:hidden attribute to the element, or set the line-height to be less than the height you set.

3, a number of pictures in some browsers appear the default spacing.

Solution: Add the Float property to the picture element.

4. The label setting min-height property is incompatible.

Solution: Set the minimum height of the label to 300px. The following settings are required: {Min-height:300px;height:auto!important;height:300px;overflow:visible;}

Note: When the content height is less than one value (such as 300px), the container height is 300px, when the content height is greater than this value, the container height is high, rather than the scroll bar, you need to consider this compatibility problem.

5. Opacity defines the transparency of the element.

Solution: Filter:alpha (opacity=80); /*ie supports this attribute */

opacity:.8; /* Support CSS3 's browser */

6, the text shadow compatibility problem.

Solution: Ie:{filter:shadow (color= #666, direction=135,strength=5)}

Other browsers: {text-shadow:1px 1px 1px #666;}

7, the box shadow compatibility problem.

Solution: {box-shadow:5px 5px 5px #666,-mox-box-shadow:5px 5px 5px #666;-webkit-box-shadow:5px 5px 5px #666;}

8, the definition of 1px height of the container.

Solution: Overflow:hidden | | zoom:0.08 | | line-height:1px

Note: The Zoom property Sets or retrieves the scale of the object.

9. Vertical center of text and picture.

Solution: Define *{vertical:middle for all descendant elements of the common parent element for text and pictures;}

Example:<p> I want to center vertically </p>

P*{vertical:middle;}

10. To be Continued ...

Some compatibility issues encountered during source web development