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跨瀏覽器

回答

相關問題