Front-end development – Browser compatible pit

Recently began to sort out the front-end development of browser compatibility problems, the initial release of a little less content, the subsequent will continue to update the content ~

A, JS

1. New Date() — Safari requires special care

// For a string representing time var dateTimeStr ="The 2019-10-10 10:10:10"; New Date(dateTimeStr) // Chrome works fine; Safari reports Invalid Date: // Place the time in the stringThe '-'convert'/'
dateTimeStr =  dateTimeStr.replace(/-/g, '/') new Date(dateTimeStr) // Now works in Chrome and Safari.Copy the code

2. Event Compatibility

The compatibility of events is mentioned in the article I wrote, where methods can be directly used to introduce JavaScript – event and compatibility handling

3. Get the cursor position — IE

ThisDom. SelectionStart = thisDom. SelectionStart = thisDomlet range = document.selection.createRange()
range.collapse(false)
range.setEndPoint('StartToStart', thisDom.createTextRange())
position = range.text.length
Copy the code

4. Check the browser type

// Check the browser typefunction browserType() { var userAgent = navigator.userAgent; Var isOpera = userAgent.indexof ("Opera") > 1; / / determine whether Opera browser var isIE = window. The ActiveXObject | |"ActiveXObject" in window
    var isEdge = userAgent.indexOf("Edge") > 1; Var isFF = userAgent.indexof ("Firefox") > 1; Var isSafari = userAgent.indexof ("Safari") > -1 && userAgent.indexOf("Chrome") = = 1; Var isChrome = userAgent.indexof ("Chrome") > -1 && userAgent.indexOf("Safari""> < span style =" max-width: 100%; clear: both; min-height: 1em; isEdge; // Check Chromeif (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["The $1"]);
        if (userAgent.indexOf('MSIE 6.0')! = 1) {return "IE6";
        } else if (fIEVersion == 7) {
            return "IE7";
        }
        else if (fIEVersion == 8) {
            return "IE8";
        }
        else if (fIEVersion == 9) {
            return "IE9";
        }
        else if (fIEVersion == 10) {
            return "IE10";
        }
        else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
            return "IE11";
        }
        else {
            return "0"}// Internet Explorer version is too early}if (isFF) {
        return "FF";
    }
    if (isOpera) {
        return "Opera";
    }
    if (isSafari) {
        return "Safari";
    }
    if (isChrome) {
        return "Chrome";
    }
    if (isEdge) {
        return "Edge"; }}Copy the code

Second, the HTML report

1. ‘rows’ for textarea cannot be 0 or empty.

Third, the CSS

0. Organize CSS compatible articles

A. CSS compatibility of IE6

Textarea — Ie scroll bar

A textarea will have a scroll bar in Ie. Try wrapping a div around it so that the width of the textarea is larger than the width of the outer div and the outer div covers the scroll bar.

2. Scroll bar — IE

Ie vertical scroll bar, not included in width; In Chrome, it’s included in width; [Be careful when setting the padding]

3.line-height—ie

The line height in IE is not the same as in Google, mainly due to the box model. In Ie, you need to subtract the padding from the height.

4.flex—ie8

Ie8 does not support Flex layouts

5.unset—ie

Ie does not support unset overwriting. For example, if you write border:1px solid #000 before it, you can write border-bottom:unset after it. It doesn’t empty the bottom-bottom. However, setting it to None works.

6. Input is marked with a cross in Internet Explorer 11

// Clear the input cross in IE11 ::-ms-clear{display:none; } input::-ms-reveal{display:none; }Copy the code

7. Ie10 + and IE6 ~ IE10 hack

// Compatible ie10+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: None) {. ClassName {}}. ClassName {//IE6/IE7/IE8/IE9/IE10 all valid paddING-right: 22px \9; }Copy the code

Recently, I am working on a public account related to front-end programmers. In addition to technology sharing, I have also added articles about career development and life records. Welcome to pay attention to, chat and ridicule together, work hard together and live seriously!