css提交按钮/ href跨浏览器

我想我的提交按钮+链接看起来像所有浏览器中的按钮和相同。css提交按钮/ href跨浏览器

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>

来源

2009-07-18 Cudos

您可以替换提交按钮用图像你做同样的方式与一个链接的背景图像。简单地摆脱背景和边框，将background-url放在输入选择器中，并给它正确的宽度和高度。

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

来源

2009-07-18 18:43:33

那么这只是一个具有适当宽度和高度的透明图像？ – Cudos 2009-07-18 19:00:20

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

来源

2009-07-18 18:34:01 chaos

我有点希望能使用CSS。你知道，更轻的网站，更容易改变，更好的支持改变按钮内的文字。 – Cudos 2009-07-18 18:40:05

对于按钮而不是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-18 18:40:35 czuk

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

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

来源

2009-07-18 18:51:38

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

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

虽然您可以很容易地修复IE6和7上最显眼的差异。

它添加到CSS为您的按钮（<button>和<input>）：

overflow: visible;

你可以把它只有IE6/7样式表里面，虽然这应该不会影响任何其他浏览器，因为visible实际上是默认值。但由于某些原因，这可以修复IE6和IE7上与填充不一致的问题，与链接的不一致。

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

display: inline-block;

来源

2009-07-18 20:23:59 mercator

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

来源

2012-06-28 22:03:06 dubious

css提交按钮/ href跨浏览器

回答

相关问题