About browser compatibility issues, we developed will certainly encounter some cases, today to talk about from cell phones, computers, js, html, css these areas.
1, compatible mobile browser.
There will be compatibility problems with the layout of flex on the phone, only with a new version of the Android phones will not recognize the phenomenon
.box{
display: -webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;/* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;/* 混合版本语法: IE 10 */
display: -webkit-flex;/* 新版本语法: Chrome 21+ */
display: flex;/* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
输入框的兼容性解决
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
Text label line-height: 1 line-height or a height equal to the text will be cut
Floats on the phone try to write to write wide width otherwise it is prone to compatibility problems, try not to write high, because the number is not fixed content
To different screen sizes of mobile phones provided particular style
@media only screen and (min-device -width: 320px) and (max-device-width: 375px) {}
Be sure to include the element type attribute or will default form is submitted, the emergence of unexpected bug
Some Android phone comes with a browser does not recognize onkeydown onkeypress onkeyup events that will lead to not enter Chinese characters
If do not want to enter text input box can only be read but not write can add readonly property
Write a background motion on the phone, if required to effect movement of positioning background effects can be calculated by adding rem basckground-size: * 100% FIG number 0;
2, is compatible html
1.H5 new tab in IE9 browser identifies the following
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js Download
https://github.com/aFarkas/html5shiv/releases
2.ul label inside and outside the margins issue ul tags IE6 \ IE7, there is a default margins, but there is a default padding over IE8 and other browsers. Solution: a unified set of internal and external ul margins to 0
3, CSS style compatibility
Hack 1.css problem: the main for the different versions of IE, different browsers wording different
conditions hack IE comments:
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
From 2.IE6 bilateral problem: IE6 after floating, have lateral margin, at this time, from the outside of the element is 2 times the value of
the solution: display: block;
There is a gap at the bottom of the picture 3.IE6
Solution: img set to display: block;
Under 4.IE6 between two float will have a bug 3px of
solution: elements of the right to also set float: left;
There is no concept of the min-width 5.IE6, which is the default width min-width
Under 6.IE6 using margin: 0 auto; unable to center
Solution: Set text-align its parent container: center;
7. hyperlink is clicked after the property is no longer hover and active
solutions: the order lvha writing css styles,
": Link": a tag status has not been accessed;
": visited": state a tag has been visited;
": hover": Hover state on a label;
": Active": a tag the state in which pressing the mouse;
8. After use absolute positioning or relative positioning, IE z-index is set failure, the reason is because it depends on the z-index element of the parent element, parent element but the default is 0, the parent Gao low, so it will not change the display order of
9.IE6 can not be set at 1px high line, because the line by default due to high
solution: three-set overflow: hidden; or line-height: 1px;
4, JavaScript compatibility
1. Standard methods event binding function addEventListener, but the IE is the attachEvent;
2. The manner inconsistent with the capture event, the standard browser from outside to inside, while IE is from the inside to the outside, but the end result is the standard IE as standard
3.window.event acquired. And acquires different target element method, the standard browser event.target, and the lower IE are event.srcElement
The difference value is not 1900, but in the high version of IE and to maintain a consistent standard browser, the difference value is obtained and the date 1900 acquired in low 4. versions of IE handler.
For example: var year = new Date () getYear ();.
5.ajax different implementations, I understand this is to get the different XMLHttpRequest, the next IE is activeXObject
Tr 6.IE can not operate the DOM obtained innerHtml7 the parent node, child node in different ways.
Other browsers: the parentNode parentNode.childNodes
IEs: parentElement parentElement.children