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

What is the compatibility problem of web front-end browsers and its solution? for 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 more simple and feasible method.

In the front-end interview questions, the most common is to encounter browser compatibility problems. For example, interview questions often ask: which browsers are compatible with you at work? What compatibility problems have you encountered in actual development? The following editor will provide you with a solution to the front-end browser compatibility problem.

The so-called browser compatibility problem refers to the situation that the display effect of the page is not uniform because different browsers have different parsing of the same code. In most cases, our requirement is that no matter what browser users use to view our website or log on to our system, it should be a uniform display. Therefore, the problem of browser compatibility is a problem that front-end developers often encounter and must solve. Of course, the question about browser compatibility is too general, so when the interviewer asks this question, you can ask what the interviewer is referring to.

1. Compatibility issues in CSS:

Style compatibility of Input buttons in ios and Android

Ios has default rendering gradients and rounded corners and its line height does not increase with the content.

Solution:

Add to the label

-webkie-appearance:none; Height:4rem

The problem of rolling through:

Scrolling penetration means that when there is a flxed mask and pop-up layer on the mobile side, the slide on the screen can slide the content under the background.

The final solution

Body.modal-open {

Postion:flxed

Width:100%

II. Compatibility issues in js

1.const problem

Note: under Firefox, you can use the const keyword or var keyword to define constants.

Under IE, you can only use the var keyword to define constants.

Solution: uniformly use the var keyword to define constants.

2.event.srcElement problem

Description: under IE, event object has srcElement attribute, but no target attribute; under Firefox, even object has target attribute, but not

There is a srcElement attribute.

Solution: use srcObj = event.srcElement? event.srcElement: event.target

3. Event binding

IE:dom.attachEvent ()

Other browsers: dom.addEventListener ()

Standard browsers use event capture to correspond to IE's event bubbling mechanism (that is, the standard from outermost element to innermost element or IE from innermost element to outermost element). The last standard party also thinks that IE is more reasonable in this aspect, so it incorporates event bubbling into the standard, which is also the origin of the third parameter of addEventListener, and event bubbling is taken as the default value.

4.ajax is slightly different.

IE:ActiveXObject

Other: xmlHttpReuest

This is the answer to the problem of web front-end browser compatibility and what the solution is. 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.