Browser compatibility problems encountered and how to deal with them

Objective:

In Sunday, there was a seniors looking for me to help do three pages, because there is no data exchange and so on, just the front page, thinking of a long time not to do things, reading are tired, so it is practiced hand. Before because there is no system of reading, so in fact, a lot of problems are not comprehensive, belong to know its why the state, although there are still a lot of things to learn, but know their shortcomings is better than not know it? And this is a kind of progress? In short, encountered a variety of problems, and then I found that the problem is mainly divided into two categories, one: I do not know how to solve the problem, most of the questions asked degree Niang or ask the great God is can be done; Implemented but there are ambiguities or conflicts in this column. And as far as I do this page I met the biggest problem is the browser compatibility problem, with the solution is here and everyone to share, hope to offer, I can learn more knowledge, thank you.

Body:

1. Problems encountered: Current browser is IE7 and the following version

Workaround: Use a div overlay to let the user not see what the normal page renders

Implementation: Set the Display property of the div that is displayed as normal to none, and set the display property of the overlay div to block (PS: The browser download link can be added to allow users to browse the page as soon as possible)

2. Problems encountered: IE8 cannot be rounded, because IE8 is not well supported CSS3

Solution: Download pie to enable IE8 to support fillet corners in CSS3

Implementation method: Here the implementation method will not elaborate, download and then "Behavior:url (PATH/PIE.HTC);" Change the path to be able to access, say a few things to note:

(1) This reference must be placed in the HTML file, and the path is relative to the reference HTML file, placed in the CSS file will not be effective

(2) If you find that the reference is successful, the object needing rounded corners disappears, do not square, go to take a bath to come out is good, the test

Joking, I did go to wash a bath but did not appear, so the code appeared bug what, praying in the end is useless AH (bay stretched out), from the beginning, and went to Baidu a bit, found that the problem, is because of Z-index, but only set a z-index no effect, OH ~　　　　　　　　Originally its position attribute can not be static is the default value, OK, set position for relative OK, perfect fillet in IE8 to realize ~ (Here I sincerely thank the engineer who wrote Pie It's really because of your efforts that makes me so easy to achieve the effect I want, Cancao Amida ~)

3. Problem: Still IE8, cannot support CSS3 in @media screen and (...) Implementing responsive layouts

Solution: No way, who let it be torture goblin? (shrug) write a JS file separately to get the screen width, and then add the corresponding styles separately

Implementation method: "<!--[if Lt ie9]><script type= ' text/javascript ' src= ' path ' ></script> <! [endif]--> "in the HTML, and then in the introduction of the JS file implementation is OK. Said a period of painful things to everyone happy, I have been engaged for a long time, found inexplicable is not, to the Internet to find the code of the Great God, one by one control is not ! How can not, this is how hurt self-esteem things ah. Then I found out that there was an extra space between "IE9" and ">"

(Goodbye manually). But the sense of accomplishment after calling out the bug is still some ha, is to know because of this reason, a kind of "Let me want to kill myself first 100 times good" feeling.

JS code is affixed below, in fact, the principle is very simple. The main is that there are some small differences between innerwidth and clientwidth, if there is doubt, there are many great gods on the Internet detailed analysis can be searched to see.

/*Responsive layout for compatible IE8 for different width windows*/functiongetwidthheight () {varWwidth,wheight; //Get window width    if(window.innerwidth) {wwidth=window.innerwidth; }Else if(Document.body &&document.body.clientWidth) {Wwidth=Document.body.clientWidth; }    //Get window Height    if(window.innerheight) {wheight=Window.innerheight; }Else if(Document.body &&document.body.clientHeight) {Wheight=Document.body.clientHeight; }    //get the window size by examining the body inside the document    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(){    varWwidth =getwidthheight (). Wwidth; if(Wwidth <= 900){        $("Body"). CSS ("Font-size", "5px"); }Else if(Wwidth > && wwidth < 1200){        $("Body"). CSS ("Font-size", "8px"); }Else if(Wwidth > 1200){        $("Body"). CSS ("Font-size", "10px"); }});

4. Problem encountered: In the previous version of Ie11, if is in the <a> tab, a strange blue border will appear

Implementation method: Give add a "border:0;" Absolutely immediate

5. Encounter the problem: because it is the front page, so wrote the picture scrolling, ie10 to the piece inexplicable appear extra space

Implementation method: Give add a sentence "display:block;" Excellent results

6. Problems encountered: Vertical display of the text used "WRITING-MODE:TB-RL;" But when I went to my friend's computer, I found it was not effective on my beloved FF. And then found that because FF4 and the following version did not implement this property, this property was originally from IE to come out of (frankly speaking, I was a bit surprised, after all, ie in my mind is an eccentric genius, belong to their own small inventions but all belong to the destruction, so incredibly useful properties are IE to come out, and FF actually to come to realize later, have to say for me is quite unexpected.

Solve the idea: No, there are problems to find a solution, it can only be a sentence with the UL Li nested, and then floating to the right, set the width to achieve (frankly speaking after using the Writing-mode this method is silly and the effect is not good)

Implementation method: The idea said, then directly on the code.

HTML section

 //<br> here to allow punctuation to be able to re-start a line
<ul>        <Li>It's a nice day.<BR>, it's a nice day.<BR>。</Li>        <Li>It's a nice day.<BR>。</Li>        <Li>It's a nice day.<BR>, it's a nice day.<BR>。</Li>        <Li>It's a nice day.<BR>？ It's a nice day.<BR>；</Li>        <Li>It's a nice day.<BR>？</Li></ul>

 //css Part
UL{width:6em;//em is a relative unit, better than px, 1em = font-size size (if not set font-size is determined by the inherited value)Overflow:Hidden;//guarantee that the layout will not be blown offList-style:None;//Remove the default style}ul Li{float: Right;//Implement right -to-left layoutwidth:1em;//Fixed width guarantee only one word is displayedMargin-left:0.2em;//Ensure that each Li contains a certain interval between the content to be able to see clearlyWord-break:Break-word;//Tell the browser to wrap each word automatically}

The above is my tuning compatibility problems, the following is the two types of problems I said before, that is, my limited ability to meet the problems, there is no solution to the existing problems

One: The question boils down to two words: float ! (Must be capricious to its bold and the bottom line) whether it is inexplicably this div ran to the back, ah, you this IMG with the navigation above the layout of running what run; Hey, why is this P-tag so irresponsible? IMG With you all obediently stay under, you ran to the top of the div inside the p tag next to what to do, make a base? Well, I admit that the pot is still on its own back, because the float is really strong, but the bad will really have very strange results appear. So, read the book, and yell at the tags or the browser to feel like they're innocent.

Two: (1) because of the asynchronous loading of files in, so the use of jquery load method, but in Google Browser is forbidden, there is no way to tune but to the server, the same 360 is the same

(2) Google can not set font-size less than 12px, which is Google's bug exists for a long time, although do not know why to keep, probably think this is cool? Search online for a solution "-webkit-text-adjust:none;" But my test did not succeed, Google directly banned, said there is no this thing.

Something:

Finally, there is a little bit of my personal feeling, practice will learn a lot of knowledge, and not read so boring, but these knowledge will be very rambling, so the study of this system is still necessary, so will work hard to combine the two, hoping to have more progress. There are also a little bit of IE's sentiment: because IE is very personal, browser implementation inside Special love Maverick, so I hate IE, I think is probably a group of people who relied on their own very 6 do not put others look at the genius guys, but now found that IE actually I personally is the back pot little angel, It itself for the realization of the front end is very thoughtful, a lot of meticulous place is very good, and the development of the front-end technology is also very forward-looking, so the previous reason will not be able to scold it is also because of their ignorance, after all, as a genius always have some different from ordinary people's temper to show it as a genius of the fact I will not scold it for no reason, but still sincerely hope that it will be in the future someday, do not torture our lovely front-end program ape:-)

Browser compatibility problems encountered and how to deal with them