Question

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

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>

Answer 1

您可以使用与使用背景图像相同的方式替换“提交”按钮。只需摆脱背景和边框，将background-url放在输入选择器中，并为其指定正确的宽度和高度。

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}

Answer 2

对于按钮而不是type="submit"使用type="image"。

例如：

<button type="image" src="path_to_your_image.png">Buy now</button>

对于链接，您可以使用css设置链接的背景：

background-image: url('path_to_your_image.png');

Answer 3

我认为你明白你永远不会让他们看起来完全相同，因为即使在Firefox 3.5中他们看起来也不一样。

除了纯粹的风格外，他们总会有不同的行为。例如，按钮对标签或点击的反应不同（某些浏览器“压下”文本），按钮不会显示与链接相比所指向的URL，您可以选择链接的文本，但不能选择一个按钮。

尽管如此，你可以很容易地解决IE6和7上最明显的差异。

将此添加到按钮的CSS（<button>和<input>）：

overflow: visible;

您可以将其放在IE6 / 7的样式表中，但这不应影响任何其他浏览器，因为visible实际上是默认值。但由于某种原因，这修复了与填充不一致的问题，与IE6和IE7上的链接不一致。

并将以下内容添加到CSS的链接中。所有浏览器都需要这个，以使链接的行为更像块元素，就像按钮一样：

display: inline-block;

Answer 4

我知道这是一个老问题，但我最近遇到了这个问题，并且不想在我的布局中使用任何图像。我提出的解决方案（在制作链接块之后，正如其他人建议的那样）是明确设置边框，字体和背景颜色。要使边框匹配，请单独设置它们。最初我试图使用一开始的边框，但我最好使用带有特定颜色的实心边框，包括顶部，左侧，底部和右侧。（我选择了基于Firefox一开始使用的颜色的颜色。）希望这有助于某人。此外，为链接和按钮添加边框半径使它们更清晰。

Answer 5

如果您想要统一的外观，则需要使用图像提交按钮。

Answer 6

您总是可以使用JavaScript框架将元素替换为更具样式的元素，或者使用MSIE的条件注释来进行特定于浏览器的样式。

可悲的事实是纯CSS和按钮似乎不可能实现跨浏览器像素的完美。

css提交按钮/一个href跨浏览器

6 个答案: