CSS 提交按钮 / 跨浏览器的 a 链接

Question

CSS 提交按钮 / 跨浏览器的 a 链接

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>

- Cudos

6个回答

1

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

例如：

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

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

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

- czuk

1

我猜你应该明白它们永远不可能完全一样，因为即使在Firefox 3.5中，它们对我来说也并不完全相同。

除了纯样式之外，它们总是有不同的行为。例如，按钮会对选项卡或单击作出不同的响应（某些浏览器会“按下”文本），按钮不会显示与链接不同的指向URL，并且您可以选择链接的文本，但无法选择按钮的文本。

不过，你可以很容易地解决IE6和7中最突出的差异。

将以下内容添加到按钮（<button>和<input>）的CSS中：

overflow: visible;

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

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

display: inline-block;

- mercator

1

我知道这是一个老问题，但最近我遇到了这个问题，不想在我的布局中使用任何图像。我想出的解决方案（在制作链接块之后，如其他人建议的那样）是明确设置边框、字体和背景颜色。为了使边框匹配，单独设置它们。最初我尝试使用凸起边框，但使用具有特定颜色的实线边框取得了更好的效果，用于顶部、左侧、底部和右侧。（我选择的颜色基于Firefox用于其凸起边框的颜色。）希望这能帮助某些人。此外，将链接和按钮添加border-radius可以使它们更清洁。

- dubious

0

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

- chaos

我希望能够使用CSS来实现。你知道，网站更轻便，更易于更改，对于按钮内部的文本更好的支持。 - Cudos

0

你可以使用JavaScript框架来替换元素，以便使用更多样化的样式或使用MSIE的条件注释进行特定于浏览器的样式设置。

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

- Alan Plum

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler Carter · Accepted Answer

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

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