javaScript and css html common compatible,

　　In recent days always encounter compatibility problems, he compiled a javaScript and html, css compatible with the common appear. There are incomplete or incorrect welcome to correct me. I hope this blog can help some friends just the tip of learning.

A, javaScript compatibility issues arise

1, DOM style operations
within the line acquisition / non-line pattern (can not be used to set, can obtain)
   a normal browser written:
                  the getComputedStyle (Element, to false) .attr acquiring external style, not a pseudo class indicates to false. (IE9 can not support IE8 or less)
   IE browser wording:
                  element.currentStyle.attr

  // function getStyle(ele,attr){                 //ele元素，attr属性
        if (ele.currentStyle) {
            return ele.currentStyle[attr];
        } else {
            return getComputedStyle(ele, false)[attr];
        }

2, access to the event object
   normal browser: The first parameter (eve) event handler
   IE browser: Find event attributes window (window.event)
   compatible with the wording:

  element.onclick = function (eve) {
            var e = eve || window.event;
            console.log(e);
        }

3, keyboard event object
   normal browser: e.keyCode
   IE: e.which
   compatible with the wording:

     document.onkeydown = function (eve) {
            var e = eve || window.event;
            var code = e.keyCode || e.which;
        }

4, to prevent bubbling event
   when the event the inner element is triggered, which in turn triggers the same direction all the parent event of the
   normal browser: e.stopPropagaction
   IEs browser: e.cancelBubble = true
   compatible wording: a package called stopBbble The function

function stopBubble(e){
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble = true;
                }
        }

5, to prevent the default event
   system provides all belong to the default
   normal browser: e.preventDefault ()
   IE browser: e.returnValue = false
   compatible with the wording:

function stopDefault(e){
                if(e.preventDefault){
                        e.preventDefault()
                }else{
                        e.returnValue = false;
                }
        }

6, event delegate compatible target of
   // the same event multiple sub-elements, add to the existing common parent element, to achieve the purpose of saving the event of
   a normal browser: e.target
   IE browser: e.srcElement
   compatible with the wording:

var target=e.target||e.srcElement

7, the binding events and delete events

normal browser wording:
　　listening event bindings (different from the binding events can be repeated assignment type)

obox.addElementListener=("click",function(){
        console.log("hello");
    },false)

　　Delete an event listener bindings

obox.addElementListener=("click",fn1,flase)
　　function fn1(){
　　　　console.log(2);
　　}
obox.removeElementListener=("click",fn1,false);

IE browser written
　 binding events:

obox.attachEvent("onclick", function(){
        console.log(1);
    })

　　Delete Event

obox.detachEvent("onclick",fn1)

Binding is compatible with the wording of the event:

function addEvent (ELE, type, cb) {       // ELE event type parameter type callback cb 
　　IF (ele.attachEvent) { 
   　　ele.attachEvent ( "ON" + type, cb) 
   } the else { 
   　　ele.addEventListener (type, cb, to false ) 
                    } 
   }

Deletion events compatible with the wording

function removeEvent(ele, type, cb) {
　　if (ele.detachEvent) {
　　　　ele.detachEvent("on" + type, cb)
　　} else {
　　　　ele.removeEventListener(type, cb, false)
　　}
}

Second, the following are some common html and css compatible with the

1, the floating double BUG:

Description: After the bulk properties float element sets, and set the value of the lateral margin, margin value is a large value displayed in the setting than IE6;

solution: float elements added to display: inline; convert inline element;

2, form elements of the row of high inconsistency:

solution:

　　　A, to form elements added Vertical-align = left: Middle;

　　　B, to the form element to a float: left;

. 3, IE6 (default 16px is minimum) does not recognize the smaller height of label (typically 10px):

solution:

　　a, was added to the label overflow: hidden;

　　B, is added to the tag-size font: 0;

. 4, add hyperlink image, in IE there will be blue border:

solution:

　　to add a picture border: 0 or border: none;

. 5, the height of the minimum min-height incompatible IE6;

solution:

　　a, min-height: 100px; _height: 100px;

　　B, height-min: 100px; height: Auto Important; height:! 100px;

. 6, picture default gap:

solution:

　　A, was added to the float property img;

　　B, img added to the display: Block;

. 7, the default button sizes :

solutions:

　　a, if the button is a picture, a button directly background image;

　　B, with a button labeled analog, use for other functions JS;

8, percentage BUG:

Description: Set the parent element to 100%, 50% each sub-element, in IE6, 50% + 50% greater than 100%;

solution:

　　to the floating elements on the right to add Clear: right;

. 9, the mouse pointer BUG:

　　cursor: Hand only IE identification;

　　cursor: pointer; IE and above browsers identification and other browsers (hand type);

10, provided the transparency, opacity property does not recognize IE:

solution:

　　standard written: opacity: value; (range 0-1);

　　compatible IE browser filter: alpha (opacity = value); (range 1-100);

11, vertically overlap margin:

description: to set the above elements margin-bottom, the following elements to set margin-top, which can identify the larger that value;

solution:　　

　　a, margin-top and margin-bottom is provided only one value;

　　B, to one of the elements and then wrapped in a box, and disposed over-Flow: hidden;

12 is, to the sub-element setting margin-top application of. the parent element:

solution:

　　A Margin-top to the sub-element to the parent element arranged to set padding-top;

　　B, is provided to border 1px parent element, i.e., Top-border: 1px Solid transparent;

　　C, to the parent element disposed Flow-over: hidden;

　　D, the parent element is set to float: left;

javaScript and css html common compatible,

Guess you like