css 提交按钮/a href 跨浏览器

标签 css cross-browser submit

我希望我的提交按钮 + 链接看起来像按钮,并且在所有浏览器中都一样。

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/

相关文章:

css - 什么被誉为目前最好的 IE PNG 修复程序?

C# WebBrowser 控件 - 使用 InvokeMember ("Click"提交表单不工作)

jQuery Submit() 对我未定义的属性不起作用?

javascript - Firefox 忽略表单提交的 JavaScript 覆盖

javascript - jQuery Carousel 插件显示不需要的边框

径向渐变的CSS浏览器检测?

javascript - 如何知道浏览器是否有针对 HTML5 表单元素的特定呈现?

javascript - <tr> 的随机颜色

css - 为什么绝对定位元素嵌套在第一个 "row"相对 div 而不是其父 div?

javascript - 动态文件夹内容的图像自动滑动器