0

Chrome と Firefox では、ボタン内のテキストは折り返され、2 行になります。ただし、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

ボタンの幅と高さを設定し、空白を明示的に追加します:要素の通常

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

テキストに char 改行は必要ありません。IE では、「Download for $4.99」という間違った表示になります。また、このトリックは、他の一部のブラウザーでは機能しません (こちらを参照) 。

于 2013-10-03T13:32:28.630 に答える
0

これを CSS プロパティのリストに追加することもできます。

display: table\9;

これは、IE のみを対象とする CSS ハックです。

ハリー・ロバーツの提案のようなことをして、IEハック固有のshame.cssファイルを使用することをお勧めします。そうすることで、IE バージョンのサポートが徐々に廃止されるため、CSS の保守が容易になります。

于 2013-10-03T13:33:29.540 に答える
0

使用している IE のバージョンは何ですか? 最新バージョンを使用していない限り、IE には常に問題があります。うまくいくかどうかはわかりませんが、これを CSS に追加してみてください。

        clear:both;

それでもうまくいかない場合は、JFIDDLE して、様子を見させてください。

回答の更新、古いバージョンの IE は新しい CSS を受け入れません。実際には IE は回避策です。場合によっては JavaScript を実装する必要がありますが、それでもうまくいかないこともあります。あなたが試すことができるもう一つのことは

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

他のすべてが失敗した場合は、あなたのウェブサイトを JFIDDLE してください。

于 2013-10-03T13:29:05.670 に答える