我希望我的提交按钮 + 链接看起来像按钮,并且在所有浏览器中都一样。
Firefox 3.5 运行良好。但是IE6,7,8的外观各不相同。你能帮我完成这个(看似)简单的任务吗?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">Buy now</a>
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
最佳答案
您可以用图像替换提交按钮,就像用链接的背景图像一样。简单地去除背景和边框,将背景 url 放入输入选择器中,并为其指定正确的宽度和高度。
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
关于css 提交按钮/a href 跨浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1148201/