Shulou(Shulou.com)06/03 Report--

How to deal with the browser compatibility problem encountered in web development, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a simpler and easier way.

Text:

1. Encountered a problem: the current browser is ie7 or below

Solution: overwrite with a div so that users cannot see the content rendered on the normal page

How to achieve this: set the display property of the div that normally displays the content to none, and set the display property of the overlay div to block (PS: you can add a browser download link to allow users to browse the page as soon as possible)

two。 Problem encountered: fillet cannot be implemented in ie8 because ie8 does not support css3 very well

Solution: download PIE to make ie8 support rounded corners in css3

Implementation method: the implementation method here will not be described in detail. Download and then "behavior: url (path/PIE.htc);" change the path and you will be able to access it. Let's talk about a few issues that need to be paid attention to:

(1) the reference must be placed in the html file, and the path is relative to the referenced html file, so putting it in the css file will not have any effect.

(2) if it is found that the object that needs to be rounded disappears after the citation is successful, do not square, just take a bath and test it yourself.

Jokingly, I did take a shower but did not show up, so the code appeared BUG and so on. It was useless to ask God to worship Buddha after all. I adjusted it from the beginning and went to Baidu again. I found a problem because of z-index, but only setting a z-index had no effect. Oh, it turned out that its position attribute could not be the default value of static, ok, and setting position to relative would be ok. The perfect fillet is realized in ie8. (here I sincerely thank the engineers who wrote PIE for making it so easy for me to achieve the effect I wanted because of your efforts.

3. Encountered problem: still ie8, can not support @ media screen and (.) in css3. Implement responsive layout

Solution: there is no way, who makes it a grinding leprechaun? (shrugs) write a separate js file to get the screen width, and then add the corresponding style separately

Implementation method: "" put it in html, and then implement ok in the imported js file. Said that during a period of painful things to make everyone happy, I did for a long time, found that inexplicable is no good, went to the Internet to find the code of each god, one by one comparison is not good! How can it not? what a damage to self-esteem. And then I found that it was because there was an extra space between "ie9" and ">".

(goodbye manually). However, there is still a sense of achievement after calling up the BUG, ha. I just know that for this reason, there is a feeling that "it makes me want to kill myself 100 times first."

The js code is posted below, but the principle is very simple. Mainly there are some small differences between innerWidth and clientWidth, if in doubt, there are a lot of detailed analysis of the gods on the Internet to take a look.

JavaScript Code copies content to the clipboard

/ * compatible with ie8 to implement responsive layout of windows with different widths * /

Function getWidthHeight () {

Var wWidth,wHeight

/ / get the window width

If (window.innerWidth) {

WWidth = window.innerWidth

} else if (document.body & & document.body.clientWidth) {

WWidth = document.body.clientWidth

}

/ / get the window height

If (window.innerHeight) {

WHeight = window.innerHeight

} else if (document.body & & document.body.clientHeight) {

WHeight = document.body.clientHeight

}

/ / detect the body inside the Document to obtain the window size

If (window.documentElement & & window.documentElement.clientWidth & & window.documentElement.clientHeight) {

WWidth = window.documentElement.clientWidth

WHeight = window.documentElement.clientHeight

}

Return {"wWidth": wWidth, "wHeight": wHeight}

}

$(document) .ready (function () {

Var wWidth = getWidthHeight () .wWidth

If (wWidth 900 & & wWidth

1200) {

$("body") .css ("font-size", "10px")

}

});

4. Encountered a problem: in versions prior to ie11, if

In the label, a strange blue border appears.

Implementation method: give

Adding a "border:0;" will definitely have immediate results.

5. Encountered a problem: because it is the front page, so write the picture scrolling, the following pictures of ie10 inexplicably appear extra space

Implementation method: give

Add the word "display:block;" to achieve excellent results

6. Encountered a problem: the vertical display text used "writing-mode:tb-rl;", but when I went to my friend's computer to adjust it, I found that it had no effect on my beloved FF. Then I found that it was because FF4 and the following versions did not implement this attribute, which was originally conceived by ie (to be honest, I was a little surprised at that time. After all, ie was a withdrawn genius in my mind, who made some gadgets but all belonged to destruction, so such a useful attribute was conceived by ie, and FF was not implemented until later. I have to say it was quite a surprise to me.)

Solution: no way, if there is a problem, we have to find a way to solve it, so we can only use ul li nesting sentence by sentence, then float to the right and set the width (to be honest, this method is stupid and not effective after using writing-mode)

Implementation method: the idea is said, then go directly to the code.

XML/HTML Code copies content to the clipboard

/ / html part

/ / this is so that punctuation can be restarted.

It's a beautiful day. It's a beautiful day.

It's a beautiful day.

It's a beautiful day. It's a beautiful day.

Isn't it a beautiful day? What a beautiful day

Isn't it a beautiful day?

XML/HTML Code copies content to the clipboard

/ / css part

Ul {

Width: 6emPlacement is a relative unit, which is better than px, 1em = the size of font-size (if font-size is not set, it is determined by inheritance value)

Overflow: hidden;// ensures that the layout will not collapse

List-style: none;// removes the default style

}

Ul li {

Float: right;// implements right-to-left layout

Width: 1emposition / fixed width guarantee that only one word is displayed

Margin-left: 0.2 embank / ensure that there is a certain interval between the contents of each li so that it can be seen clearly

Word-break:break-word;// tells the browser to wrap lines after each word.

}

These are the problems I encountered in compatibility. The following are the two types of problems I mentioned earlier, that is, the problems I encountered because of my limited capacity, and the existing problems that cannot be solved.

One: this problem boils down to two words: floating! (you have to be wayward and add a bottom line) whether it's inexplicable, this div goes to the back; hey, why is your img following the navigation layout above? Hey, why is this p tag so irresponsible? The img with you all stay down there obediently. What are you doing next to the p tag in the div above? are you gay? Well, I admit that in the final analysis, I have to carry this pot on my own, because the float is really powerful, but if it is not used well, there will be really strange results. So, read a good book, scold these tags or browsers here feel that they are also quite innocent.

Two: (1) because the file is loaded asynchronously, the load method of JQuery is used, but it is forbidden on Google browser, there is no way to adjust it, but it can be changed to the server.

(2) Google cannot set font-size less than 12px. Google's BUG has been around for a long time, although I don't know why I keep it all the time. I probably think it's cool? I found a solution "- webkit-text-adjust:none;" on the Internet, but I didn't succeed in my test. Google banned it directly, saying there was no such thing.

This is the answer to the question about how to deal with the browser compatibility problems encountered in web development. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.