Common Browser compatibility and browser compatibility

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.