IE中的窗體按鈕問題

在Chrome和Firefox中，按鈕中的文本被換行並佔用兩行。但是，在Internet Explorer中，該按鈕中的文本未被換行並且該按鈕被擴展。IE中的窗體按鈕問題

見$ 4.99上 http://www.manual-buddy.com/p/technics/rs1500usvolume1-service-manual.html

CSS按鈕下載：

.paypalOrderSubmitButton { 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 14px; 
    line-height: 100%; 
    font-weight: normal; 
    border-radius: 0.5em; 
    padding: .5em 2em .55em; 
    text-align: center; 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: white!important; 
    border: solid 1px #DA7C0C; 
    background: #FAA51A; 
    white-space: normal; 
}

感謝

您正在使用什麼版本的IE

來源

2013-10-03 Ankur Dhanuka

？除非您使用最新版本，否則IE總是有問題。不知道它是否可以工作，但試着將它添加到你的CSS。

 clear:both;

如果這不起作用，JFIDDLE它，讓我看看。

更新答案，舊版本的IE不接受新的CSS，實際上IE是touch來解決。有時JavaScript必須實現，但即使有時也不行。你可以嘗試的另一件事是

 word-wrap: normal; 
     word-wrap: break-word; 
     word-wrap: inherit;

如果一切都失敗了，JFIDDLE你的網站，我會看看。

來源

2013-10-03 13:29:05 2Truth

設置按鈕的寬度和高度，並明確地添加白色空間：元素

style="width: 120px; height: 40px; white-space: normal"

正常你不需要字符換行的文本。在IE瀏覽器上它會出現錯誤：「下載$ 4.99」。另外，這個技巧不適用於其他瀏覽器，因爲您可以看到here。

來源

2013-10-03 13:32:28 rkawano

他已經在他的CSS屬性的末尾。 – Brian

您也可以嘗試添加這CSS屬性列表：

display: table\9;

這是一個CSS破解只針對IE瀏覽器。

我建議你做點像Harry Roberts' suggestion to use a shame.css file that is IE hack specific。這樣，IE版本支持緩慢下降，維護CSS更容易。

來源

2013-10-03 13:33:29 Brian

如果您使用width，會出現問題嗎？

.paypalOrderSubmitButton { 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 14px; 
    line-height: 100%; 
    font-weight: normal; 
    border-radius: 0.5em; 
    padding: .5em 2em .55em; 
    text-align: center; 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: white!important; 
    border: solid 1px #DA7C0C; 
    background: #FAA51A; 
    white-space: normal; 
    width: 120px; // I have added one here additional 
}

當然組成：fiddle

來源

2013-10-03 13:50:37

它，因爲你必須給填充在EM（填充：2em的.5em .55em;）

嘗試給它在PX

來源

2013-10-03 13:50:50 Tushar

填充使按鈕在IE中展開，因爲IE會添加填充像素。

你可以使用條件標籤來添加ie類，這取決於哪個IE瀏覽器。然後使用特定的類來覆蓋您現有的類來解決IE問題。

<!--[if IE ]><![endif]--> 
<!doctype html> 
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

然後在你的CSS文件，你需要編寫一些代碼，如：

.ie7 .paypalOrderSubmitButton, 
.ie8 .paypalOrderSubmitButton, 
.ie9 .paypalOrderSubmitButton { 
     width: 120px; 
}

您可以設置寬度，或者你只是設置填充爲0 IE瀏覽器。

這是解決IE問題的輕量級方法。

來源

2013-10-03 13:53:36 joydesigner

IE中的窗體按鈕問題

回答

相關問題