Question

在Chrome和Firefox中，按钮中的文字被包装并占用两行。但是，在Internet Explorer中，按钮中的文本未包装，并且按钮已扩展。

点击按钮下载，只需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;
}

感谢

Answer 1

填充导致按钮在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;
}

您可以设置宽度，或者只是将IE浏览器的填充设置为0.

这是解决IE问题的轻量级方法。

Answer 2

您使用的是哪个版本的IE？除非您使用的是最新版本，否则IE始终存在问题。不确定它是否可行，但请尝试将其添加到CSS中。

        clear:both;

如果这不起作用，JFIDDLE它，让我看看。

更新答案，IE的旧版本不接受新的CSS，实际上IE是触摸解决方法。有时候必须实现javascript，但有时甚至都行不通。你可以尝试的另一件事是

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

如果其他所有方法都失败了，请查看您的网站，我会看看。

Answer 3

设置按钮的宽度和高度，并明确在元素上添加 white-space：normal

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

您不需要文本上的字符串换行符。在IE上它将被错误地说：“下载4.99美元”。此外，这个技巧对其他一些浏览器不起作用，因为你可以看到here。

Answer 4

您也可以尝试将其添加到CSS属性列表中：

display: table\9;

这是一个仅针对IE的CSS黑客攻击。

我建议做Harry Roberts' suggestion to use a shame.css file that is IE hack specific之类的事情。这样就可以更容易地维护你的CSS，因为IE版本的支持会慢慢下降。

Answer 5

如果您使用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

Answer 6

因为你已经给了填充（填充：.5em 2em .55em;）

尝试在px中提供

IE中的表单按钮问题

6 个答案: