CSS style compatibility problem

1. Labels in different browsers have different internal and external margins by default

*{margin: 0; padding: 0; }

In fact, every front-end developer uses the same method to clear the default styles in the browser. Here is the reset style code I chose to clear the default styles

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } h1,h2,h3,h4,h5,h6,em,i { font-weight: 100; font-style: normal } ul,ol,li { list-style-type: none } a { color: #666; text-decoration: none; outline: 0 } a:hover { text-decoration: none }Copy the code

2. Image with a label will have a border in IE9

Img {border: none; }

3.IE6 and lower floating elements, floating edge double margin

Solution: Use padding instead of margin

4. In IE6 and later, some block elements have default heights

Font-size: 0;

5. The blue border of the A label

A {outline: none; }

6. Internet Explorer 6 does not support min-height

{min-height: 200px; _height: 350px; }

The following browsers cannot use opacity in Internet Explorer 9

Opacity: 0; /*FF chrome safari opera*/ filter: alpha(opacity:70); /* Use ie filter, compatible with IE */}

8. Display: Inline-block IE6/7 is not supported

{display: inline-block; *display: inline; }

9. Cursor compatible

Use {cursor: pointer; }

10. Line-height failure when IE6, 7 img is put together with text

Solution: Set float for both text and img

11. Table width fixed, TD automatic line wrap

Table setup {table-layout: fixed}, TD setup {word-wrap: break-word}

12. When margin is set for adjacent elements, margin is set to the maximum value instead of the minimum value

{overflow: hidden}; {overflow: hidden};

13. A Label CSS status sequence

Solution: Write in the order link–visited–hover–active

14. There are gaps under the pictures in IE6 and IE7

Image Settings: img{display: block; }

The ul tag has a padding value by default in Firefox, whereas in IE it has a margin value

Margin: 0; ul{margin: 0; padding: 0; }

16. A typesetting error occurred when li specified the height in IE

Solution: Set line-height

17. Ul or LI floats and is displayed outside the div

Solution: must be added after ul label

18. Margin becomes larger in IE after ul sets float

Ul {display: inline; }, li {list – style – position: outside; }

19. If the content in li exceeds the length, you want to display it as an ellipsis

Li {width: 200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }

20. After li sets float, margin will be larger in IE

Margin: 0px for p, padding-top and padding-bottom for div

21. A blank line appears when div nested p

Li {display: inline; }

22. The default div height in IE6 is the height of a font display

{line-height: 1px; }, or {overflow: hidden; }

13. CSS 3 prefix

– Webkit – WebKit Rendering engine Chrome/Safari – Moz-Gecko Rendering engine Firefox – Ms-Trident Rendering engine IE-O-Opeck rendering engine Opera

1) the rounded

  .box{
       height: 40px;
       background-color: red;
       color: #fff;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
   }
Copy the code

2) the shadow

  .box{
        width:200px;
        height:200px;
        -webkit-box-shadow:0px 1 2px;
        -moz-box-shadow:0px 1 2px;
        box-shadow: 0px 1 2px;
        background-color: #fff;
   }
Copy the code

3) Background gradient

.box{ width: 200px; height: 200px; background: -ms-linear-gradient(top, #35FEA1, #6E9DFF); /* IE 10 */ background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); /* firefox */ BACKGROUND :-webkit-gradient(Linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF)); /* Google */ BACKGROUND: -webkit-gradient(Linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF)); /* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF); /*Safari5.1 Chrome 10+*/ BACKGROUND: -o-Linear -gradient(top, #35FEA1, #6E9DFF); Opera 11.10 + / * * /}Copy the code

4) animation

@-webkit-keyframes name{0%{CSS style for the start of animation; } 100%{animation end CSS style; } } -webkit-animation: name .5s infinite linear;Copy the code

5) transition

.box{-webkit-transition: all.3s ease-in-out 0s; }Copy the code

Javascript Compatibility Issues

1. Compatibility of event objects:

e = ev || window.event

2. Compatibility of rolling events:

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3. Compatibility to prevent bubbling:

  if(e.stopPropagation){
      e.stopPropagation();
  }else{
      e.cancelBubble=true;
  }
Copy the code

4. Prevent default behavior compatibility:

  if(e.preventDefault){
      e.preventDefault();
  }else{
      e.returnValue = false;
  }
Copy the code

5. Add event listener compatibility:

  if(target.addEventListener){
      target.addEventListener("click",fun,false);
  }else{
      target.attachEvent("onclick",fun);
  }
Copy the code

6. Ajax object creation compatibility

Var XHR = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft XMLHTTP"); }Copy the code

7. Compatibility of mouse button coding:

function mouse(ev){ var e = ev || window.event; if(evt){ return e.button; } else if(window.event){ switch(e.button){ case 1: return 0; case 4: return 1; case 2: return 2; }}}Copy the code

8. In IE, event objects have x and Y attributes, but FF does not

In FF, the equivalent of event.x is event.pageX, but not in event.

ex = event.x ? event.x : event.pageX;

9. In IE, the even object has the srcElement attribute, but no target attribute. In Firefox, the even object has a target attribute, but no srcElement attribute

  var source = ev.target || ev.srcElement;
  var target = ev.relatedTarget || ev.toElement;
Copy the code

10. In Firefox, CSS should be used to prohibit web content selection, and JS should be used to prohibit web content selection in IE

obj.onselectstart = function() {return false; } // IE

-moz-user-select:none; // Firefox