A standard box model and a weird box model

div{
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid # 000;
margin:20px;
}
Copy the code

Browser box models fall into two categories

  • Standard W3C box model

    Chrome, firefox, Internet explorer 9, ie 10, IE11 box model for the standard model

    Actual width/height = width/height + 2padding + 2border;

  • Ie6-8 Box model

    Width /height is the size of the box, including the padding and border width (this happens if there is no document declaration in the HTML document);

You can use docType to declare
, let the browser use standard mode.

Box-sizing properties (CSS3)

Box-sizing :content-box, using standard parsing mode, default mode;

Box-sizing :border-box; box-sizing:border-box;

The following browsers cannot use opacity in Internet Explorer 9

Opacity: 0.5; filter: alpha(opacity = 50); / / IE6 IE8 we used to filter filter attributes to implement the filter: progid: DXImageTransform. Microsoft. The Alpha (style = 0, opacity = 50); / / IE4 - ie 9 support filter writing progid: DXImageTransform. Microsoft. Alpha (Opacity = xx)Copy the code

New Date(‘2019-4-18’) IE incompatible

Val = ‘2019-4-18’ to get the date of the next day also return this format

var dd = new Date(val);
dd.setDate(dd.getDate()+1);// Get the date after AddDayCount
let Y = dd.getFullYear() + The '-';
let M = (dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1) + The '-';
let D = (dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()) + ' ';
return (Y + M + D + '00:00:00');
Copy the code

NAN error will be reported in IE because IE cannot recognize new Date(‘2019-4-18’)

  • New Date(‘2019/4/18’)
  • Thu Apr 18 2019 15:33:55 GMT+0800 (Chinese Standard Time
val.setMinutes(val.getMinutes() - val.getTimezoneOffset() + 24 * 60); // Tomorrow takes an extra 24 hours *60 minutes
return val.toJSON().slice(0.10) + '00:00:00'
Copy the code

4 IE event binding

The W3C way

element.addEventListener('click', function(e){ // ... }, false);

Advantages of W3C bindings

  • 1. This method supports both the capture and bubbling phases of event processing. The event phase depends on the final parameter setting of the addEventListener: false (bubble) or true (capture).
  • 2. Inside the event handler, the this keyword refers to the current element.
  • 3. Event objects can always be captured by the first argument (e) to the handler function.
  • 4. You can bind as many events as you want to the same element without overwriting previously bound events

Disadvantages of W3C bindings

  • 1.IE does not support this function. You must use the attachEvent function of IE instead.

IE way

element.attachEvent('onclick', function(){ // ... });

Advantages of IE mode

  • 1. You can bind as many events as you want to the same element without overwriting previously bound events.

Disadvantages of THE IE way

  • 1.IE only supports the bubbling phase of event capture;
  • 2. The this keyword in the event listener refers to the window object instead of the current element (a huge weakness of IE);
  • 3. The event object exists only in the window.event parameter.
  • 4. Events must be named as onType, for example, onclick, not click;
  • 5. Only Internet Explorer is available. You must use the W3C addEventListener in non-IE browsers.

Compatible with writing

var eventshiv = {
    / / the event compatibility
    getEvent: function(event) {
        return event ? event : window.event;
    },

    / / type compatible
    getType: function(event) {
        return event.type;
    },

    / / target compatible
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    // Add an event handle
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // Here due to. Cannot be linked with 'on' strings, only with []
            elem['on'+ type] = listener; }},// Remove the event handle
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null; }},// Add the event broker
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this points to e.target}}); },// Cancel the default behavior
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false; }},// Prevent events from bubbling
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true; }}};Copy the code

Compatible with IE

1. The default styles of different browsers vary

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
Copy the code

Simple and crude method

* { margin: 0; padding: 0; }
Copy the code

2. Solve the problem that THE following browsers of IE9 do not recognize new html5 tags

<! -- [if lt IE 9] > < script type = "text/javascript" SRC = "https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > <! [endif]-->
Copy the code

3. Solve the problem that Internet Explorer 9 does not support CSS3 Media Query

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
Copy the code

4. Solve the problem that Internet Explorer 9, 10, 11 do not support labels

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
Copy the code

5. Double margins in IE6

In IE6, setting float and margin at the same time causes double margins

display: inline;
Copy the code

6. Fixed absolute positioning is not supported in IE6, and elements that are absolutely positioned in IE6 will flash when scrolling

/* IE6 hack */
*html, *html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}
*html #menu {
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}
Copy the code

7. Solve the problem that Internet Explorer 6 does not support min-height

min-height: 350px;
_height: 350px;
Copy the code

8. Make Internet Explorer 7 support CSS3 background-size

Background-size polyfill is a new attribute added to CSS3, so it is not supported in IE versions. Use this file to enable IE7 and IE8 to support background-size properties. Insert an img element into the container and recalculate the width, height, left, and top values to simulate background-size.

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}
Copy the code

9. Internet Explorer 6-7 line-height failure

Problem: Line-height does not work when img is placed with text in IE

Solution: All set to float

10. Ie6/7/8 mouse display little finger

cursor:hand
Copy the code

Other browsers

cursor: pointer;
Copy the code

Six browser CSS compatible prefixes

-o-transform:rotate(7deg); // Opera -ms-transform:rotate(7deg); // IE -moz-transform:rotate(7deg); // Firefox -webkit-transform:rotate(7deg); // Chrome transform:rotate(7deg); // unified identity statementCopy the code

Seven keyboard events keyCode compatibility writing method

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}
Copy the code

Eight window size compatible writing method

// The size of the viewable area of the browser window (excluding toolbars and scrollbars)
/ / 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// The actual width and height of the page content (including the sidebar and scrollbar)
/ / 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// The actual width and height of the page content (excluding toolbar and scrollbar edges)
/ / 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// Roll height
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
Copy the code