My face questions encountered ------ front-end common browser compatibility issues --- front-end solutions to common browser compatibility problem solution

Common front-end solution for browser compatibility issues

 

Different browser kernels are not the same, so each browser parses the web page there are some differences.
Browser kernel is divided into two, one rendering engine, and the other is js engine, more inclined to say that the core rendering engine.
Common browser kernel:

Different styles are different default browser, you can use  Normalize.css erase these differences.

1. different labels in different browsers default outer and inner patch patch

Symptoms of the problem: just write a few labels, without the case of the pattern control their margin and padding quite different.

Frequency met: 100%

Solution: CSS in * {margin: 0; padding: 0;}

Note: This is the most common and most easily solved by a browser compatibility issues, almost all of the CSS files that start with the wildcard * will be set up inside and outside the patch each tab is 0.

 

2. Block Properties tab float, the margin where there is rampant, in IE6 display set larger than the margin

Problem Symptoms: Common symptoms are behind IE6 is in a top to the next line

Encounter frequency: 90% (slightly more complex page comes across, float layout of the most common browser compatibility issues)

Solution: Add the label display control pattern of float: inline; converted to the inline attribute

Notes: Our most commonly used is div + CSS layout, while the div is a typical block attribute tag, landscape layout when we usually use div float to achieve, the lateral spacing is set if the margin realized, this is an inevitable encounter compatibility issues.

 

3. Set the label height smaller (generally less than 10px), in IE6, IE7, travel beyond their height set height

Symptoms of the problem: a high degree of control IE6,7 and travel in this label, set up their own beyond the height

Encounter frequency: 60%

Solution: Settings tab to exceed the height of overflow: hidden; set the row height, or line-height less than the height you set.

NOTE: This occurs in the background we set up a small fillet tag. This problem occurs because the previous IE8 browser will default to tag a minimum row height height. Even if your tag is empty, the height of the tag will still reach the default row height.

 

The line 4. Properties tab, set display: where the block layout using float, there is rampant margin, pitch IE6 bug

IE6 pitch in the pitch ratio exceeds the set: Symptoms of the problem

Hit chance: 20%

Solution: display: block; back added display: inline; display: table;

NOTE: inline attribute labels, in order to set the width and height, we need to set display: block; (in addition to input special label). After the float with the layout and the lateral margin, at IE6, he lateral margin having the bug after the float block attributes. But because it is itself within the property line tag, so we add display: inline, then it can not be located on the aspect. This time we also need to display: adding display behind inline: talbe.

 

5. Image has default spacing

Symptoms of the problem: img tag put together a few times, some browsers will default spacing, plus a wildcard problems mentioned does not work.

Hit chance: 20%

Solution: Use the float property layout img

NOTE: Because img tag within an attribute tag line, so long as the width of the container does not exceed, img tag will be ranked on a single line, but between img tag will be part of the browser pitches. This spacing is used to remove the float right way. (One of my students use negative margin, although able to solve, but a negative margin itself is prone to browser incompatibilities usage, so I forbid them to use)

 

6. The minimum height of the label set is not compatible min-height

Symptoms of the problem: because the min-height itself is not compatible with a CSS property, it is not good to be compatible with various browsers when setting min-height

Hit probability: 5%

Solution: If we want to set a minimum height of the label 200px, need to be provided for: {min-height: 200px; height: auto important; height:! 200px; overflow: visible;}

Note: When B / S front-end open systems, we have this demand in many cases. When the content is less than a value (e.g., 300px). Height of the container is 300px; height when the content is greater than this value, the height of the container support is high, rather than the scroll bar. This time we will be faced with this compatibility problem.

 

7. Transparency compatible with CSS

 

.transparent_class {  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}   

 

 

 

If we are familiar with the default property of the label, then you can well understand why there will be compatibility problems and how to resolve these compatibility issues.

◆ IE6 know hacker is an underscore _ and the asterisk *

◆ IE7 travel hacker know that asterisk *

For example, such a CSS settings:

height: 300px; * height: 200px; _height: 100px; 
IE6 browser to read height: 300px time will be considered at high 300px; read on, he recognized * heihgt, so when IE6 read * height: 200px of when will override the settings before a conflict, that the height is 200px. Read on, IE6 also recognized _height, so he will overwrite the settings 200px high, the height is set to 100px;

IE7 is the same read and travel down from a height of 300px settings. When they read * height200px would stop, because they do not know _height. So they will be resolved to the height of 200px, the rest of the browser only recognize the first height: 300px; height so they will resolve to 300px. Because the same priority and want the property to a conflict will overwrite the previous one, so the order of writing is very important.

 

8.IE6 from bilateral issues: setting the float in IE6, but also set the margin, there will be a problem margins
Solution: Set display: inline;

 

9. When the label is less than the height provided 10px, in IE6, IE7 provided will exceed the height of their
solutions: Label set beyond the height of the overflow: hidden, or the value of the line-height setting is less than your height

 

10. Picture default spaced
Solution: Use a float for the layout img

 

11.IE9 your browser can not use the opacity
Solution:
opacity: 0.5; filter: Alpha (opacity = 50); filter: ProgID: DXImageTransform.Microsoft.Alpha (style = 0, opacity = 50);

 

12. The overlap margin; when two adjacent elements are provided with margin margin, margin will take the maximum, minimum discarded;
Solution: In order to prevent the overlapping edge, a parent element may be added to the sub-elements, and the parent element is disposed overflow: hidden;

 

13.cursor: hand hand display type is not supported on safari
solutions: unified use cursor: pointer

 

14. The two block-level elements, the parent element is provided overflow: auto; child element set position: relative; and a height greater than the parent element in IE6, IE7 will be hidden and not overflow;
solution: parent element set position: relative

 

15.IE6 background flickering problem

Question: links, buttons  CSSsprites as a background, the  ie6 phenomenon will be flashing at the background. The reason is that  IE6 there is no background caching, each trigger  hover time will be reloaded

Solution: can  JavaScript set  ie6 cache these pictures:

document.execCommand("BackgroundImageCache", false, true);

 

 

16. addressed in IE6, dislocation date list of issues

Date <span> label on the title  <a> prior to labels

 

17.Resolve  IE6 not support the  min-height issue of property

min-height: 350px;
_height: 350px;

 

 

18.Let  IE7 IE8 supported  CSS3 background-sizeproperty

Due to the new CSS3 background-size property is so low version of IE do not support a natural, but a foreigner wrote a htc file named  background-size polyfill , use the file allows IE7, IE8 support background-size property. The principle is to create a img element inserted into the container, and recalculate the effect of the width, height, left, top contour, an analog of the 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');
}

 

 

19.IE6-7  line-height failure problem

Question: ie in  img the time and text put together line-height does not work

Solution: are set to float

width:100%

width:100% This thing in  ie a very convenient, the search will be up layer by layer  width value, ignoring the impact of floating layers.

Firefox Under the search to the end of the floating layer, so can only add to the middle of all floating layer of  width:100%the job, Leia.

opera This fall astray, with the ie

cursor:hand

Hand display type  cursor: hand, ie6 / 7/8, opera are supported, but the safari, ff not supported

cursor: pointer;

20.td issue wrap

Question: table a fixed width, td wrap

Solution: Set  Table to  table-layout: fixed, td to word-wrap: break-word

 

21.Let layer displayed  FLASH on top

Want the content displayed on the layer flash, a transparent to the FLASH

1、<param name=" wmode " value="transparent" />
2、<param name="wmode" value="opaque"/>

22.Key events  keyCode compatibility wording

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)
}

 

 

23. The window size compatible seeking wording

// size of the viewable area of the browser window (not including toolbars and scroll bars sideline) 
// 1600 * 525 
var = client_w document.documentElement.clientWidth || document.body.clientWidth; 
var client_h = document.documentElement.clientHeight | | document.body.clientHeight; 

// width and height of the actual page content (including the toolbars and scroll bars sideline) 
// 1600 * 8 
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth; 
var = scroll_h the Document. || document.body.scrollHeight documentElement.scrollHeight; 

// actual width and height of the page contents (not including the scroll bars and toolbars edges) 
// 1600 *. 8 
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth; 
= || document.body.offsetHeight document.documentElement.offsetHeight offset_h var; 

// rolling height
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

 

 

24.DOM event handlers compatible wording

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

// <span class="hljs-built_in">type</span>兼容
getType: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-built_in">return</span> event.type;
},

// target兼容
getTarget: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-built_in">return</span> event.target ? event.target : event.srcelem;
},

// 添加事件句柄
addHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
    <span class="hljs-keyword">if</span> (elem.addEventListener) {
        elem.addEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.attachEvent) {
        elem.attachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        // 在这里由于.与<span class="hljs-string">'on'</span>字符串不能链接，只能用 []
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = listener;
    }
},

// 移除事件句柄
removeHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
    <span class="hljs-keyword">if</span> (elem.removeEventListener) {
        elem.removeEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.detachEvent) {
        elem.detachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = null;
    }
},

// 添加事件代理
addAgent: <span class="hljs-keyword">function</span> (elem, <span class="hljs-built_in">type</span>, agent, listener) {
    elem.addEventListener(<span class="hljs-built_in">type</span>, <span class="hljs-keyword">function</span> (e) {
        <span class="hljs-keyword">if</span> (e.target.matches(agent)) {
            listener.call(e.target, e); // this 指向 e.target
        }
    });
},

// 取消默认行为
preventDefault: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-keyword">if</span> (event.preventDefault) {
        event.preventDefault();
    } <span class="hljs-keyword">else</span> {
        event.returnValue = <span class="hljs-literal">false</span>;
stopPropagation: <span class = "hljs
// Event prevent bubbling
}
    }

    <span class="hljs-keyword">if</span> (event.stopPropagation) {
        event.stopPropagation();
    } <span class="hljs-keyword">else</span> {
        event.cancelBubble = <span class="hljs-literal">true</span>;
    }
};

 

 

Different browser kernels are not the same, so each browser parses the web page there are some differences.
Browser kernel is divided into two, one rendering engine, and the other is js engine, more inclined to say that the core rendering engine.
Common browser kernel:

Different styles are different default browser, you can use  Normalize.css erase these differences.

1. different labels in different browsers default outer and inner patch patch

Symptoms of the problem: just write a few labels, without the case of the pattern control their margin and padding quite different.

Frequency met: 100%

Solution: CSS in * {margin: 0; padding: 0;}

Note: This is the most common and most easily solved by a browser compatibility issues, almost all of the CSS files that start with the wildcard * will be set up inside and outside the patch each tab is 0.

 

2. Block Properties tab float, the margin where there is rampant, in IE6 display set larger than the margin

Problem Symptoms: Common symptoms are behind IE6 is in a top to the next line

Encounter frequency: 90% (slightly more complex page comes across, float layout of the most common browser compatibility issues)

Solution: Add the label display control pattern of float: inline; converted to the inline attribute

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

 

3.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

 

4.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

 

5.图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

 

6.标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

 

7.透明度的兼容CSS设置

 

.transparent_class {  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}   

 

 

 

如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px; 
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

 

8.IE6双边距问题:在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;

 

9.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

 

10.图片默认有间距
解决方案：使用float 为img 布局

 

11.IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 

12.边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

 

13.cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer

 

14.两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

 

15.IE6 背景闪烁的问题

问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载

解决：可以用 JavaScript 设置 ie6 缓存这些图片：

document.execCommand("BackgroundImageCache", false, true);

 

 

16.解决在 IE6 下，列表与日期错位的问题

日期<span> 标签放在标题 <a> 标签之前即可

 

17.解决 IE6 不支持 min-height 属性的问题

min-height: 350px;
_height: 350px;

 

 

18.让 IE7 IE8 支持 CSS3 background-size属性

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 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');
}

 

 

19.IE6-7 line-height 失效的问题

问题：在ie 中 img 与文字放一起时，line-height 不起作用

解决：都设置成 float

width:100%

width:100% 这个东西在 ie 里用很方便，会向上逐层搜索 width 值，忽视浮动层的影响.

Firefox 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。

opera 这点倒学乖了，跟了 ie

cursor:hand

显示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持

cursor: pointer;

20.td 自动换行的问题

问题：table 宽度固定，td 自动换行

解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word

 

21.让层显示在 FLASH 之上

想让层的内容显示在 flash 上，把 FLASH 设置透明即可

1、<param name=" wmode " value="transparent" />
2、<param name="wmode" value="opaque"/>

22.键盘事件 keyCode 兼容性写法

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)
}

 

 

23.求窗口大小的兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

 

 

24.DOM 事件处理程序的兼容写法

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

// <span class="hljs-built_in">type</span>兼容
getType: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-built_in">return</span> event.type;
},

// target兼容
getTarget: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-built_in">return</span> event.target ? event.target : event.srcelem;
},

// 添加事件句柄
addHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
    <span class="hljs-keyword">if</span> (elem.addEventListener) {
        elem.addEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.attachEvent) {
        elem.attachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        // 在这里由于.与<span class="hljs-string">'on'</span>字符串不能链接，只能用 []
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = listener;
    }
},

// 移除事件句柄
removeHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
    <span class="hljs-keyword">if</span> (elem.removeEventListener) {
        elem.removeEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.detachEvent) {
        elem.detachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = null;
    }
},

// 添加事件代理
addAgent: <span class="hljs-keyword">function</span> (elem, <span class="hljs-built_in">type</span>, agent, listener) {
    elem.addEventListener(<span class="hljs-built_in">type</span>, <span class="hljs-keyword">function</span> (e) {
        <span class="hljs-keyword">if</span> (e.target.matches(agent)) {
            listener.call(e.target, e); // this 指向 e.target
        }
    });
},

// 取消默认行为
preventDefault: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-keyword">if</span> (event.preventDefault) {
        event.preventDefault();
    } <span class="hljs-keyword">else</span> {
        event.returnValue = <span class="hljs-literal">false</span>;
    }
},

// 阻止事件冒泡
stopPropagation: <span class="hljs-keyword">function</span>(event) {
    <span class="hljs-keyword">if</span> (event.stopPropagation) {
        event.stopPropagation();
    } <span class="hljs-keyword">else</span> {
        event.cancelBubble = <span class="hljs-literal">true</span>;
    }
};