Web Front End ~ ~ Browser compatibility issues (Baidu)

The so-called browser compatibility problem, refers to because different browsers have different parsing of the same code, resulting in the page display effect is not uniform situation. In most cases, our demand is that no matter what browser the user uses to view our website or to login to our system, it should be a unified display effect. So browser compatibility is a problem that front-end developers often encounter and must solve.

Browser compatibility Issue One: different browser tags default external patches and internal patches are different
Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.
Solution: CSS in *{margin:0;padding:0;}
Note: This is the most common and the most easy to solve a browser compatibility problem, almost all of the CSS file starts with a wildcard * to set the internal and external patches of each tag is 0.

Browser compatibility Issue two: block attribute tag float, and there is the margin of the case, in the IE6 show margin than set the large
Problem symptom: A common symptom is that the next piece in IE6 is top to bottom row
Solution: Add Display:inline to the label style control of float and convert it into inline properties
Note: Our most commonly used is div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div float, horizontal spacing setting if using margin to achieve, this is a must encounter compatibility problem.

Browser compatibility issue Three: set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond its own set height
Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings
Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.
Note: This usually occurs in the label where we set the small rounded background. This problem occurs because the browser before IE8 will give the label a minimum height of the row height. Even if your label is empty, the height of the label will still reach the default row height.

Browser compatibility issues Four: in-line property labels, set display:block after the float layout, there are horizontal margin, IE6 spacing bug (similar to the second kind)
Problem symptom: The spacing in IE6 is more than the spacing set
Solution: Add display:inline;display:table after Display:block;
Note: In-line property labels, in order to set the width, we need to set display:block; (except that the input tag is special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. However, because it is the inline attribute tag itself, so if we add display:inline, its aspect will not be set. We also need to add display:talbe behind Display:inline.

Browser compatibility issue Five: Image default spacing
Problem symptom: When several IMG tags are put together, some browsers will have default spacing, and adding the wildcard character mentioned in the question does not work.
Solution: Use the Float property for the IMG layout
NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing using float is the right path.

Browser compatibility question six: Label minimum height setting min-height incompatible
Problem symptom: Because Min-height itself is an incompatible CSS property, setting Min-height is not very well compatible with each browser.
Solution: If we want to set a minimum height of 200px for a label, the setting required is: {min-height:200px; height:auto!important; height:200px; overflow:visible;}
Note: In the front of the B/s system, there are many situations where we have this demand. When the content is less than a single value (such as 300px). The height of the container is 300px, and when the content height is greater than this value, the container height is high, not the scroll bar. This is when we face this compatibility issue.

Browser compatibility issue VII: Compatible CSS settings for transparency
This is done by writing a small piece of code (one line or piece of the layout) that we have to see in different browsers for compatibility, and certainly not as troublesome to a certain degree of proficiency. It is recommended that you often encounter compatibility issues with novice users. Many compatibility issues are caused by the browser's default attribute resolution for the label, as long as we can easily fix these compatibility issues with a little bit of setup. If we are familiar with the default properties of tags, we can understand why compatibility issues arise and how to resolve them.

/* CSS hack*/
Use hacker browser can be divided into 3 categories: IE6; IE7 and roaming; other (IE8 Chrome FF Safari Opera, etc.)
IE6 know Hacker is the underscore _ and the asterisk *
IE7 Hacker is an asterisk * (including the!important in question 6 above is also considered a kind of hack. But less practical. ）
such as such a CSS settings height:300px;*height:200px;_height:100px;
IE6 browser when reading to height:300px will think high 300px; Continue reading, he also know *heihgt, so when IE6 read *height:200px will overwrite the previous one of the conflicting settings, think height is 200px. Continue to read, IE6 also know _height, so he will cover off 200px high setting, set the height of 100px;
IE7 and roaming are the same. read from the setting of height 300px. When they read the *height200px, they stopped because they didn't know _height. So they will parse the height into 200px;
The rest of the browsers only know the first height:300px, so they will parse the height to 300px.
The order of the writing is important because the same priority and the conflicting properties are set to overwrite the previous one.

Web Front End ~ ~ Browser compatibility issues (Baidu)