Home > Article > Web Front-end > Introduction to border-radius IE8 compatible processing method
Introduction to border-radius IE8 compatible processing method
- 高洛峰Original
- 2017-03-24 09:40:452724browse
According to canisue (http://caniuse.com/#search=border-radius), border-radius compatibility is shown in the figure below:
Test code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 400px;
height: 400px;
margin: 10px;
border-radius: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>IE8 browser effect:
#border-radius compatible solution in IE8 browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 400px;
height: 400px;
margin: 10px;
border-radius: 10px;
border: 1px solid red;
/*关键属性设置 需要把路径设置好*/
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>Effect under IE8 browser:
PIE.HTC download address: http://css3pie.com/
PIE can handle some properties of CSS3, such as ：
The above is the detailed content of Introduction to border-radius IE8 compatible processing method. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to box-shadow IE8 compatible processing methodNext article：Introduction to box-shadow IE8 compatible processing method