Compatibility issues with browsers
1. Browser kernel:
Mozilla Firefox (Gecko)
Internet Explorer (Trident)
Opera (Presto)
Safari (WebKit)
Google Chrome (WebKit)
2.css hack
The main way to resolve browser compatibility is CSS hack
due to the different browsers CSS support and parsing results are not the same, but also due to the precedence of CSS in the relationship. We can write different CSS for different browsers according to this.
IE6 |
IE7 |
IE8 |
Firefox |
Opera |
Safari |
|
!important |
Y |
Y |
Y |
Y |
Y |
|
_ |
Y |
|||||
* |
Y |
Y |
||||
*+ |
Y |
|||||
\9 |
Y |
Y |
Y |
|||
/ |
Y |
|||||
Nth-of-type (1) |
Y |
Y |
How to troubleshoot browser compatibility
Add the meta type <meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7" to the head tag/>, which resolves IE7, IE8 compatibility issues. Now there are IE6, IE7, Firefox, Chrome (Safari and chrome using the same kernel), opera browser compatibility issues, we need to use CSS hack to solve the problem. The code looks like this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
<title> Browser compatibility issues </title>
<style type= "Text/css" >
. t1
{
Color: #000000; /* All browsers support here to fill out Firefox css*/
*color: #0000FF; /* IE6 Id7 support here to fill in IE7 css*/
_color: #66CCCC; /* IE6 support here to fill out IE6 css*/
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{. T1{color: #9900FF}}//Oprea support here to fill out Oprea css*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
. T1{color: #336600}/* Chrome, safari support here to fill out Chrome's css*/
}
</style>
<body>
<div class= "T1" >ff, IE8, IE7, IE6, Oprea, safari compatibility css writing mode <br>
. t1{
Color: #000000; /* All browsers support here to fill out Firefox css**/<br>
*color: #0000FF; /* IE6 Id7 support here to fill in IE7 css*/<br>
_color: #66CCCC; /* IE6 support here to fill out IE6 css*/<br>
}<br>
/* Oprea support here to fill out Oprea css*/<br>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) <br>
{. T1{color: #CC66FF}}<br>
/* Chrome, Safari support here to fill out Chrome's css*/<br>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
. T1{color: #336600}}
}
</div>
</div>
</body>
1. Default internal and external margins are different
Problem:
The default internal and external margins for each browser are different
Solve:
*{margin:0;padding:0;}
2. The problem of horizontal centering
Problem:
set text-align:center
Ie6-7 text centered, nested block elements are also centered
Ff/opera/safari/ie8 text is centered and nested blocks are not centered
Solve:
Block element settings
1, Margin-left:auto;margin-right:auto
2, margin:0 Auto;
3, <div align= "center" ></div>
3. The problem of vertical centering
Problem:
in the browser to center vertically, set vertical-align:middle; does not work. For example:IE6 text and text input boxes are not aligned, you need to set Vertical-align:middle1, but the contents of the text box will not be vertically centered
Solve:
Set a container with the same height as its high
Line-height: Same as the height of the container
4. On the question of height
Problem:
If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, but if it is static content, the height is best set.
If the height is set and the content is toohigh, the height will be increased automatically under IE6, and the other browsers will exceed the border.
Solve:
1. Set Overflow:hidden;
2. Highly self-increasing height:auto!important;height:100px;
5. IE6 the default div height
Problem:
IE6 the default div height is the height of a font display, the height of the div under IE6 is greater than or equal to the height of one word, so a container with a height of 1px is defined under IE6, displaying the height of a font
Solve:
Set one of the following properties for this container
1, set Overflow:hidden;
2, set line-height:1px;
3. Set zoom:0.08
6. IE6 minimum Height (width) problem
Problem:
IE6 does not support Min-height, Min-width properties, the default height is the minimum height, and width is the minimum width.
Solve:
Use a property!important that is not supported by IE6 but supported by the remaining browsers.
Set Property min-height:200px; Height:auto!important; height:200px;
7. TD Height Problem
Problem:
The width of the TD in the table does not contain the width of the border, but the height of the TD in Oprea and FF contains the height of the border
Solve:
Set line-height and height as well. In IE, if there is no content in TD, then border will not display
8. When Div nested p, a blank line appears
Problem:
Blank lines appear in div <p> text </p>,ff, Oprea, Chrome:top, and bottom, but no blank lines appear under IE.
Solve:
set P's margin:0px, then set Div's padding-top and padding-bottom
9. Ie6-7 picture There's a gap problem.
Problem:
when a block element contains a picture,there is a gap in the picture in the Ie6-7
Solution:
1, in the source code to let </div> and on the same line
2, convert the picture to block-level object Display:block;
3, set the vertical alignment of the picture Vertical-align:top/middle/bottom
4. Change the properties of the parent object, If the parent object is wide, high-fixed, and the picture size is determined by the parent object, then the parent element can be set: Overflow:hidden;
5, set the floating property of the picture Float:left;
Ten. IE6 double margin Problem
Problem:
Double margin issues when setting a float in IE6 while setting margin
Example float:left;width:100px;margin:0 100px;
Solve:
set display:inline;
Ten. IE6 double margin Problem
Problem:
Double margin issues when setting a float in IE6 while setting margin
Example float:left;width:100px;margin:0 100px;
Solve:
set display:inline;
3px problem between two layers of IE6
Problem:
The left layer is floating, and the right side is not floating, which creates a 3-pixel gap between the two layers in the IE6.
Solve:
1, the right layer also uses floating float
2, the left layer to add attribute margin-right:-3px;
The problem of absolute positioning of IE6 sub-elements
Problem:
When a parent element uses padding, the child element uses absolute positioning and cannot be positioned precisely
Solve:
Set the _left:-20px in the child element ; _top:-1px;
14. Display Hand Type Cursor:hand
Problem:
IE6/7/8, opera are supported but Safari, FF does not support
Solve:
written Cursor:pointer; (All browsers can recognize)
Ie6-7 line-height Failure problem
Problem:
Line-height does not work when IMG is placed with text in IE
Solve:
are set to float
TD Automatic line wrapping problem
Problem:
Table width fixed, TD Automatic line wrapping
Solve:
Set The Word-wrap:break-word of the table-layout:fixed,td of table
18. Transparent PNG image with background color
Problem:
a transparent PNG image with a background color under the IE6
Solve:
Background-image:url (icon_home.png);/* Other browsers */
Background-repeat:no-repeat;
_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' icon_home.png '); /* IE6 */
_background-image:none; /* IE6 */
When the UL or Li floats, it appears outside the DIV
Problem:
The div is not in the DIV after the UL or Li set float
Solve:
must be added <div style= "Clear:both" ></div> to close the outer div after the UL tag
Content in Li is displayed as ellipses
Problem:
When the content in Li exceeds the length, you want to display it as an ellipsis, this method works for Ie6-7-8, opera, Safari browser
FF Browser does not support
Solve:
li{width:200px; white-space:nowrap;text-overflow:ellipsis;
-o-text-overflow:ellipsis; Overflow:hidden; }
35. Remove the scroll bar problem
Problem:
Hide scroll bar
Solve:
1, only ie6-7 support <body scroll= "no" >
2, except ie6-7 does not support Body{overflow:hidden}
3. All Browsers Html{overflow:hidden}
The. FF, chrome absolute positioning is invalid
Problem:
in the IE set the TD to position:relative, and then give it contains a container to use Position:absolute to locate is valid, but under the FF and Chrome can not.
Solve:
set TD's Display:block.
The question of absolute positioning of IE6.
Problem:
<div style= "position:relative;border:1px solid orange;text-align:center;" >
<div style= "position:absolute;top:0;left:0;
Background: #CCC; " >dovapour</div>
<a href= "#" title= "vapour Blog" > Content </a>
</div>
Solve:
Left positioning error problem
1. Set Zoom:1 trigger layout for parent layer.
2. Set width to parent level
The problem of locating errors in bottom
1. Set Zoom:1 trigger layout for parent layer.
2. Set height to parent level
3. When the child container width is greater than the parent container width, the content exceeds
Problem:
Child The width of the div and the width of the parent div are defined, in IE6 if the width of its child div is greater than the width of the parent div, the width of the parent Div will be expanded, and the width of the parent Div will not expand in other browsers, and the child Div will exceed the parent Div
Solve:
set Overflow:hidden, the child div will not exceed the parent div.
12, set the scrollbar color only for IE series effective in HTML instead of setting body
<style type= "Text/css" >
HTML {
Scrollbar-face-color: #f6f6f6;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #eeeeee;
Scrollbar-3dlight-color: #eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #fff;
Scrollbar-darkshadow-color: #fff;
}
</style>
IE does not support Float:inherit Overflow:hidden has 2 usages, one is hidden overflow, the other is clear floating.
<div>, <p>, examples of block elements
<span>, <a>, <label>, <input>, , <strong> and <em> are inline elements
<body oncontextmenu= "return false" ondragstart= "return false" tstart= "return false" scroll= "Auto" >
this line of stacking in the body, removed the page mouse right-click shortcut menu, to prevent the save picture as the purpose.
About browser compatibility issues and hack notation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
