浏览器私有前缀

最新推荐文章于 2024-03-05 21:40:16 发布

qq_20777797

最新推荐文章于 2024-03-05 21:40:16 发布

阅读量745

点赞数

解决各浏览器显示差异，针对浏览器写私有前缀：

IE内核：-ms-

Firefox内核：-moz-

谷歌浏览器、safari内核：-webkit-

一些样式在各个浏览器都兼容，就不用加前缀，但有些样式不行，比如渐变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
li{
	list-style:none;
	}
input{
	border:1px solid #9dadc6;
	border-radius:2px;
	height:32px;
	line-height:32px;
	margin:5px 0;
	}
.account{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:1px solid #d5deed;
	background:-moz-linear-gradient(top,#ddd 0% ,#eee 10%,#fff 20%);
	background:-ms-linear-gradient(top,#ddd 0% ,#eee 10%,#fff 20%);
	background:-webkit-linear-gradient(top,#ddd 0% ,#eee 10%,#fff 20%);
	
	}
.enter{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left:none;
	height:36px;
	
	}
</style>
</head>

<body>
<div class="wrap">
	<ul>
		<li><input type="text" value="邮箱账号或QQ号码" class="account" /><input type="button" value="@qq.com" class="enter" /></li>
		<li><input type="text" value="QQ密码" /></li>
	</ul>
</div>
</body>
</html>

如果把前缀去掉，则在各浏览器中无法显示渐变的效果