CSS按鈕和crossbrowser問題

我有一個類'按鈕'，我想用於按鈕，輸入和標籤。問題是，按鈕和輸入標籤的行高比錨定標籤要高。我在這裏附上了一個例子，所以你可以在螢火蟲或任何其他地方玩弄它。CSS按鈕和crossbrowser問題

http://28dev.com/stackoverflow/css-buttons.html

但是，對於那些誰只是想看到的CSS/HTML，那就是：

.button { 
    font-family : helvetica, arial, sans-serif; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    background : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6; 
    border-color : #636363 #888888 #888888 #636363; 
    border-right : 1px solid #888888; 
    border-style : solid; 
    border-width : 1px; 
    cursor  : pointer; 
    display  : block; 
    float  : left; 
    font-size : 12px; 
    font-weight : normal; 
    line-height : 100%; 
    min-width : 100px; 
    padding  : 3px 12px; 
    text-align : center; 
    } 
    .button, .button a { 
    color : #282828; 
    text-decoration : none; 
    } 

    .button:hover, .button:hover a { 
    border-color : #343434; 
    color : #080808; 
    } 
    .marginR { margin-right : 5px; } 


    <button class='button marginR' type='submit'>button.button</button> 
    <input type="submit" value="input.button" class="button marginR" /> 
    <a class="button" href="">a.button</a>

更新CSS： 這似乎解決大部分的問題FF，鉻，IE7和Safari瀏覽器：

.button { 
     font-family : helvetica, arial, sans-serif; 
     color  : #282828; 
     background : url(/images/layouts/silver/buttons.png) repeat-x scroll 50% 50% #E6E6E6; 
     border-color : #636363 #888888 #888888 #636363; 
     border-right : 1px solid #888888; 
     border-style : solid; 
     border-width : 1px; 
     cursor  : pointer; 
     display  : block; 
     float  : left; 
     font-size : 12px; 
     font-weight : normal; 
     min-width : 150px; 
     padding  : 3px 0px; 
     text-align : center; 
     margin-top : 0px; 
     line-height : 15px; 
     text-decoration : none; 
     border-radius  : 3px; 
     -webkit-border-radius: 3px; 
     -moz-border-radius : 3px; 
    } 
    /* Invalid CSS 
    God love IE's inability to fix their bugs properly leaving us workarounds to their inept development. 
    See http://www.webdevout.net/css-hacks 
    */ 
    html* a.button { line-height : 18px; } 

    .button:hover { 
     background-image : url(/images/layouts/silver/button-hover.png); 
     border-color : #343434; 
     color : #080808; 
    } 
    .marginR { margin-right : 5px; }

來源

2010-04-08 ynkr

只是說，作爲一個問題，你問：「我怎樣才能讓按鈕具有與錨標籤相同的行高？」或其他？ – 2010-04-08 00:55:14

這只是如何在瀏覽器中生成按鈕，它們是表單元素並具有不同的屬性。我從未見過輕鬆解決這個問題的方法。我想你可以將不同的屬性應用到錨點，直到它們看起來相同或接近。你會注意到你的按鈕也沒有得到你的min-width屬性（至少不是在Firefox中）。

而且，你的CSS：.button a {

這將適用於所有錨帶班的「按鈕」其中沒有存在，不應該永遠存在（你不把錨內按鈕）的元素中。

您還忘了基本的'border-radius'屬性，它實際上是唯一的CSS3批准的邊界半徑屬性，並且是唯一可以在IE中使用的屬性。

編輯：
這裏是在不同的瀏覽器會發生什麼情況的簡要介紹。
IE：顯示一切OK（哇，IE，真的嗎？）。
Firefox：自動調整按鈕和按鈕的寬度更高。 Chrome瀏覽器：在按鈕周圍添加邊距，按鈕更高。

來源

2010-04-08 00:53:58 animuson

FF正在將左/右填充添加到錨標記的整個寬度上;它不是按鈕/輸入。通過將3px 12px更改爲3px 0，現在所有寬度都是相同的，並且FF似乎聽取最小寬度值。我把你的建議和應用的行高添加到按鈕，然後攻擊IE7，所以現在所有的按鈕都是相同的整體高度。不是一個很好的解決方案，因爲我引入了無效的CSS，但無論如何。那個.button a {}只不過是我周圍的碎片而已。感謝您指出。粗略瀏覽鉻看起來好，所以我完成了。謝謝你的幫助！ – ynkr 2010-04-08 17:37:33

從我所看到的，我不認爲這是一個真正的行高問題。

a.button 
{ 
    position: relative; 
    top:  2px; 
}

在Safari中對齊我的頂部。

來源

2010-04-08 01:02:04

啊，我在檢查safari前停了下來。設置.button {margin-top：0;}也解決了這個問題。謝謝你的幫助。 – ynkr 2010-04-08 17:12:17

CSS按鈕和crossbrowser問題

回答

相關問題