Common Browser compatibility and browser compatibility

Common Browser compatibility and browser compatibility

Common Browser compatibility

Browser compatibility problem: the default external patch and internal patch for different browsers are different.

Symptom: if you write a limit label without style control, the margin and padding of each region are different.

 

Frequency: 100%

 

Solution: CSS setting * {margin: 0; padding: 0 ;}

Note: This is the most common and easy-to-solve compatibility problem for browsers. Almost all CSS attachments start with a wildcard * to set the internal and external patches for each label to 0.

Browser compatibility problem labels: block attribute labelsFloatLater, the cursor has a horizontalMarginInIE6Explicit SequenceMarginRegion

 

Symptom: the common symptom is that the lower part of the lower part in IE6 is pushed to the lower part.

 

Frequency: 90% (the most common browser compatibility problems with float la)

 

Solution: add internal display: inline to the label style Control of float, and convert it to internal attribute

 

Note: The most common layout is div + CSS layout. div is a typical block attribute label of div. During horizontal layout, we usually implement div float, horizontal padding setting if the margin is implemented, this is an inevitable compatibility problem for the margin.

Browser compatibility problem 3: setting a greater degree of parallelism label10px), InIE6,IE7In the game, the degree of priority exceeds the configured degree.

 

Symptoms: the degree of parallelism for the IE6, 7, and roaming labels is not controlled, and exceeds the degree set by the roaming labels.

 

Frequency: 60%

 

Solution: Set overflow: hidden for the label that exceeds the threshold; or set the threshold line-height to the threshold you set.

 

Note: This situation usually occurs when we set the labeling of the incircle background. The cause of this problem is that the browser before IE8 will give the tag a maximum degree of parallelism of the default delimiter. Even if your tag is empty, the sensitivity of the tag will still reach the default quota.

Browser compatibility issue 4: Set the attribute label in the ruleDisplay: blockPost-purchase RegionFloatLayout.Margin,IE6SpacingBug

 

Problem: IE6 distance exceeds the configured distance.

 

Success rate: 20%

 

Solution: display: block; followed by display: inline; display: table;

 

 

 

Note: For attribute labels in dimensions, we need to set display: block in order to set the width of dimensions (except for the input tags ). After the ⽤ float layout has a horizontal margin, in IE6, he has a horizontal margin bug after the block attribute float. However, because the feature is the attribute label in the feature, if we add display: inline, its feature width cannot be set. At this time, we also need to add external display: talbe after display: inline.

Browser compatibility question 5: the hacker element kidnapped the hacker ElementMargin-top

 

Symptoms: this problem mainly occurs in IE browser. If there is no content between the margin element and the margin element, after the margin element is set to margin-top, the margin element will not change, and the margin element will move down because of the margin-top.

 

Success rate: 80%

 

Solution: add the cursor <div stye = 'height: 0'> </div> between the cursor element and the timeline element. Or set the padding-top of the padding element.