3

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

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>
4

6 回答 6

2

您可以将提交按钮替换为图像，就像使用链接的背景图像一样。只需去掉背景和边框，将 background-url 放在输入选择器中，并给它正确的宽度和高度。

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}
于 2009-07-18T18:43:33.967 回答
1

对于按钮而不是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');
于 2009-07-18T18:40:35.080 回答
1

我认为你确实明白你永远不会让它们看起来完全相同，因为即使在 Firefox 3.5 中它们对我来说看起来也不完全相同。

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

不过，您可以很容易地修复 IE6 和 7 上最明显的差异。

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

overflow: visible;

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

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

display: inline-block;
于 2009-07-18T20:23:59.087 回答
1

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

于 2012-06-28T22:03:06.260 回答
0

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

于 2009-07-18T18:34:01.193 回答
0

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

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

于 2009-07-18T18:51:38.680 回答