Front-end compatibility issues summary

## HTML articles

##### style compatibility issues

<!-- IE 按 Edge 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- IE 8 9 10 按 IE7 模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />
复制代码

##### quirks mode

Quirks mode is a W3C specification does not comply with compatibility mode, which is a width of the contentWidth, about padding, including the full scope of the left and right border (the same height), similar to the box-sizing: border-box ;, and the table font-size is not inherited from the parent element. The following cases can trigger browser quirks mode (Quirks Mode):

I did not write DOCTYPE trigger quirks mode
Under plus, IE6 front will trigger quirks mode
Was added first, IE7 quirks mode enters
Before there is any non-blank character, it will trigger quirks mode in IE6
Before there is XML, not in IE7 trigger quirks mode, but you can not have other non-blank character

Check document.compatMode, you can view the browser works in which mode: Value BackCompat to quirks mode, standard mode value CSS1Compat

##### display: inline-block elements between the gap

<!-- 以下的 li 元素是 display: inline; 类型的 -->
<!-- 这样写元素之间有间隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 换个写法解决问题-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>
复制代码

Document Style ##### IE temporary failures that may occur

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 可能的script部分 -->
    <script type="text/javascript"></script>   <!-- 关键：添加一个空标签 -->
    <!-- link部分 -->
</head>
复制代码

## css articles

##### double spacing issue

/*一下代码在 IE6 中会出现双倍间距*/
#box{
  float: left;
  margin: 10px;
}

//解决方法
#box{
  float: left;
  margin: 10px;
  display: inline;
}
复制代码

##### dislocation problem

/*IE6中，这样的多个盒子并列时会发生向下偏移，应该对偏移的盒子添加负 margin-top 进行修正*/
.box{
  float: left;
}
复制代码

##### E6 odd problem Width High

IE6 in box width (width) and high (height) is odd bug will be provided, is even possible to set.

#####IE6 Peekaboo Bug

A div # top added a div # float float to the left, then add one or more div, float until cleared:

<style>
#top{
    border: dotted 2px black;
    background: #eee;    /*top有背景*/
}
#float{
    height: 196px;
    width: 196px;
    border: 2px solid red;
}
.border{
    border: 2px solid green;
}
.clear{
    clear: both;
    border: 2px solid blue;
}
</style>
<body>
    <div id="top">
        <div id="float">float div</div>
        <!-- 这以下在 IE6 中不能正常显示 -->
        <div class="border">inside-div text!</div>
        <div class="border">inside-div text!</div>
        <!-- 这以上在 IE6 中不能正常显示 -->
        <div class="clear">clear div</div>
    </div>
</body>
复制代码

Solution, to #top a height or width:

#top{
    height: 300px;
}
复制代码

##### box collapse

This problem is more common, occurs when the inner box from the outside elements set

/*发生盒子坍塌*/
#box{
  height: 300px;
}
#box .inner-box{
  margin:20px;
}

/*修正*/
#box{
  height: 300px;
  margin-top: -20px;
}
#box .inner-box{
  margin:20px;
}
复制代码

#####font size

Font size is inconsistent on different browsers. E.g. font-size: 14px, actual row in IE 16px is high, following a blank 3px; actual line in Firefox 17px is high, following a blank 3px, 1px upper blank; not even in the opera the same. Unified solution specified row height line-height

html{
  font-size: 14px;
  line-height: 14px;
}
复制代码

In addition, we will encounter font-size: 62.5% this definition, in order to be mapped to the default 16px 10px, so 1em = 10px more conducive to calculate.

##### to remove the element default margins

There are a lot of elements with default margins for our typesetting disadvantage. But the use of the wildcard * to remove the margin there is a performance problem, so clear the default margins with the following statement

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
  margin: 0;
  padding: 0;
}
复制代码

##### IE low height version defined failure

General element specifies the height property height of the element can be fixed heights, but can not be fixed element in a low height versions of IE, the height of the element will still be softened content, need to pay attention. (Same width)

##### IE6 does not support png transparency

Solution with filters

#box{
  _background: none;
  filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src='路径');
}
复制代码

##### Firefox's width problem

body Firefox browser will be smaller than the body width of a pixel other browsers, pay attention to set its child elements (in particular float element size, layout to prevent confusion.

Devour ##### IE6 problems in

IE6 for the upper and lower two address div is provided on a background, a background with div will. There are similar overflow: when scroll, scroll bars appear incomplete. Should be div respectively, in the top of the scroll bar and incomplete div plus zoom: 1 style.

##### IE6 image format problem

IE6 in the picture frame exists by default, should be uniform removed. At the same time there will be a void beneath the picture, with the font-size to solve

img{
  border: none;
  font-size: 0;
}
复制代码

##### IE 1px height can not be defined in such a small box

Empty elements in IE6 height of not less than 19px, there are four solutions:

1, to insert an empty comment in the element 2, inserted into the spaces in the element 3 was added css: overflow: hidden; 4, was added css: font-size: 0;

##### IE6 z-index Failure

When the parent element z-index attribute has been set, the z-index sub-elements will fail.

##### IE6 is always higher than in select div

Hidden select when floating div layer appears, and then select the display disappears when the floating div layer.

##### Let chrome font support is less than 12px

#box{
  font-size: 8px;
  -webkit-text-size-adjust: none;
}
/* 但是，上面这个方法 chrome27 以后就不能用了。但我们可以用 css3 解决这个问题 */
#box{
  font-size: 12px;
  -webkit-transform: scale(0.75);
}
复制代码

#####CSS Hack

Compatibility property is set, pay attention to the order of writing: writing priority mode browser supports high-grade, priority write a browser that supports many ways

/*以 color 属性为例，注意书写顺序*/
#box{
  color: #f00;   //所有浏览器都支持
  color: #0f0 !important;   //只有 IE6 无效
  color: #00f\9;  //所有 IE 都有效
  color: #ff0\0;  //IE8+ 有效
  color: #f0f\9\0; //IE9+ 有效
  *color: #fff;  //仅 IE6, IE7 有效
  #color: #0ff;  //仅 IE6, IE7 有效
  +color: #800;  //仅 IE6, IE7 有效
  -color: #008;  //只有 IE6 有效
  _color: #080;  //只有 IE6 有效
}
复制代码

Since the cover defined Properties defined earlier, all of the above is provided as the final results:

IE6 is # 080 IE7 is # 800 IE8 is # ff0 IE9,10 to # 0f0 other as # f00

Front-end compatibility issues summary

Guess you like