About browser compatibility issues encountered and solutions (recommended)

Preface:

Last Sunday, a senior asked me to help make three pages. There was no data exchange or anything like that, it was just a simple front-end page. I hadn’t done anything for a long time and was tired of reading books, so I took it and treated it as a way to practice. Because I didn’t read books systematically before, I didn’t consider many problems comprehensively. I was in a state of knowing the facts but not the reasons. Although I still have a lot to learn now, it is better to know my shortcomings than not to know them, right? And this is also considered progress? In short, I encountered various problems, and then I found that the problems can be mainly divided into two categories. One: I don’t have enough knowledge so I don’t know how to solve them. Most of these problems can be solved by asking Baidu or asking experts; Two: There are indeed loopholes in the current technology, whether it has not been implemented or has been implemented but there are ambiguities or conflicts. The biggest problem I encountered with the page I made this time was browser compatibility. If I have a solution, I would like to share it with you here. I hope it will inspire others and I can learn more. Thank you.

text:

1. Problem encountered: The current browser is IE7 and below

Solution: Cover it with a div so that users cannot see the content presented on the normal page

Implementation method: Set the display attribute of the div that normally displays the content to none, and set the display attribute of the covering div to block (PS: You can add a browser download link to allow users to browse the page normally as soon as possible)

2. Problem: Rounded corners cannot be achieved in IE8 because IE8 does not support CSS3 well

Solution: Download PIE to make IE8 support rounded corners in CSS3

Implementation method: I won’t go into details about the implementation method here. Download it and then change the path to “behavior: url(path/PIE.htc);” and you can access it. Here are a few points that need to be noted:

(1) This reference must be placed in the HTML file, and the path is relative to the referenced HTML file. Placing it in the CSS file will have no effect

(2) If you find that the object that needs rounded corners disappears after the reference is successful, don't be afraid, just take a shower and it will be fine. I have tested it myself.

Just kidding, I did go take a shower but it didn't appear, so there was a bug in the code or something, praying to God is useless (spreading hands), I adjusted it again from the beginning, and went to Baidu, and found the problem, it was because of the z-index, but setting only a z-index had no effect, oh~ It turns out that its position attribute cannot be static, which is the default value, ok, setting position to relative is ok, perfect rounded corners are achieved in ie8~ (Here I sincerely thank the engineers who wrote PIE. It is indeed because of your efforts that I can achieve the effect I want so easily, Consan Amidah~)

3. Problem: IE8 still cannot support @media screen and (....) in CSS3 to achieve responsive layout

Solution: There is no other way, because it is such an annoying little goblin. (Shrug) Write a separate js file to get the screen width, and then add the corresponding styles

Implementation method: Put “<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->” in HTML, and then implement it in the imported js file. Let me tell you a story about a painful thing I encountered during this period to make you laugh. I tried for a long time, but found that it didn't work for some unknown reason. I went online to look for codes from various great programmers, but I compared them one by one, but it still didn't work! How can it not be possible? This is such a disgraceful thing. Then I found out that it was because there was an extra space between "ie9" and ">".

(Manual Goodbye). However, there is still a sense of accomplishment after fixing the bug. Knowing that it is because of this reason, I feel like "I might as well kill myself 100 times first."

The js code is posted below. The principle is actually very simple. The main reason is that there are some small differences between innerWidth and clientWidth. If you have any questions, there are many detailed analyses by experts on the Internet that you can search for.

4. Problem encountered: In versions before IE11, if <img> is in an <a> tag, a strange blue border will appear

Implementation method: Add a "border:0;" to <img> to achieve immediate results

5. Problem encountered: Because it is the front page, I wrote the picture scrolling, and the pictures below IE10 inexplicably have extra gaps

Implementation method: Adding "display:block;" to <img> will have excellent effect

6. Problem encountered: I used "writing-mode:tb-rl;" to display text vertically, but when I adjusted it on my friend's computer, I found that it had no effect on my beloved FF. It's impossible? ? ? Then I found out that this property was not implemented in FF4 and below, and that it was originally thought up by Internet Explorer (to be honest, I was a little surprised at the time, after all, in my mind, Internet Explorer is a lonely genius who makes his own little inventions but they are all destructive, so it turned out that such a useful property was thought up by Internet Explorer, and that FF didn't implement it until later, which was quite surprising to me)

Solution: No way, if there is a problem, you have to find a way to solve it. The only way is to nest ul li sentences one by one, then float to the right and set a fixed width to achieve it (to be honest, after using writing-mode, this method is stupid and the effect is not good)

Implementation method: Now that we have explained the idea, let’s get straight to the code.

The above are the problems I encountered when adjusting compatibility. The following are the two types of problems I mentioned before, that is, the problems I encountered due to my limited ability, and the existing problems that cannot be solved.

1: This issue ultimately comes down to two words: floating! (I have to make it bold and underlined) No matter how inexplicably this div runs to the back; hey, why is your img following the layout of the navigation above; hey, why is this p tag so irresponsible? The imgs with you all stay at the bottom, but why are you running to the p tag in the div above? Are you gay? Well, I admit that I have to take the blame myself in the end, because floating is indeed very powerful, but if it is not used properly, some very strange results will occur. So, just read your book carefully. It seems innocent to criticize these tabs or browsers here.

2: (1) Because the file needs to be loaded asynchronously, the JQuery load method is used, but it is prohibited on Google Chrome. There is no way to adjust it, but it can be changed to the server. The same is true for 360.

(2) Google cannot set the font size to less than 12px. This is a bug that has existed in Google for a long time. I don’t know why it has been kept, maybe because they think it’s cool? I searched online and found a solution: "-webkit-text-adjust:none;", but I failed to test it. Google banned it directly, saying that there is no such thing.

Afterword:

Finally, I have a little personal feeling. You can indeed learn a lot of knowledge through practice, and it is not as boring as reading books. However, this knowledge will be very scattered, so systematic learning like reading books is still necessary. So I will try my best to combine the two in the future, and hope to make more progress. I also have a little insight into IE: because IE is very individual and is particularly unique in browser implementation, I used to hate IE, thinking that it was probably a group of genius guys who relied on themselves to look down on others. But now I find that IE is actually a scapegoat for me personally. It itself has a lot of ideas about front-end implementation, and it does a lot of detailed things very well. It is also very forward-looking for the development of front-end technology. So the reason why I kept scolding it before was probably because of my ignorance. After all, as a genius, there are always some tempers that are different from ordinary people to highlight the fact that it is a genius. I won't scold it for no reason anymore, but I still sincerely hope that one day in the future it will stop torturing our lovely front-end programmers like this :-)

The above article about browser compatibility issues encountered and solutions (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.