0

在 Chrome 和 Firefox 中，按钮中的文本被换行并占用两行。但是在 Internet Explorer 中，按钮中的文本没有被换行，并且按钮被扩展。

请参阅http://www.manual-buddy.com/p/technics/rs1500usvolume1-service-manual.html上的 4.99 美元按钮下载

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;
}

谢谢

4

6 回答 6

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 问题的轻量级方法。

于 2013-10-03T13:53:36.703 回答
0

如果使用会不会有问题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
}

当然：小提琴

于 2013-10-03T13:50:37.827 回答
0

这是因为您在 em 中提供了填充（填充：.5em 2em .55em;）

尝试以 px 为单位

于 2013-10-03T13:50:50.007 回答
0

What version of IE are you using? IE always has problems unless you are using the latest version. Not sure if it will work, but try adding this to your CSS.

        clear:both;

If that doesn't work, JFIDDLE it and let me see.

Updating answer, older versions of IE don't accept new CSS, actually IE is touch to work around. Sometimes javascript has to be implemented, but that won't work even sometimes. Another thing you could try is

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

If all else fails, JFIDDLE your website and i'll take a look.

于 2013-10-03T13:29:05.670 回答
0

设置按钮的宽度和高度，并明确添加white-space: normal on element

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

您不需要在文本上使用 char 换行符。在 IE 上会显示错误：“Downloadfor $4.99”。此外，此技巧不适用于其他一些浏览器，如您在此处看到的。

于 2013-10-03T13:32:28.630 回答
0

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

display: table\9;

这是一个仅针对 IE 的 CSS hack。

我建议做一些类似于Harry Roberts 的建议来使用 IE hack 特定的 shade.css 文件。这样，随着 IE 版本支持的逐渐下降，维护 CSS 会更容易。

于 2013-10-03T13:33:29.540 回答