0

簡単にするために、問題を強調するためにドキュメントにスタイルを作成しました。ボタンのように見えるようにスタイル設定された4つのリンクの行があります。次のリンク（3番目の項目）cssを使用して非表示にしています。IE8 +、Chrome、Firefoxでは完全に機能しますが、IE7では、[キャンセル]ボタンと[承認]ボタン（[次へ]ボタンがある場所）の間にギャップがあります。

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
        <style type="text/css">
            .ButtonBar
            {
                margin-top: 20px;
                text-align: center;
            }
            .LinkButton
            {
                background-color: #01699b;
                border: 0px solid;
                border-radius: 14px;
                color: #fff;
                cursor: pointer;
                font-weight: bold;
                height: 28px;
                padding: 0px 11px 0px 11px;
                overflow: hidden;
                position: relative;
                text-decoration: none;
                display: inline-block;
                line-height: 28px;
            }
            .NextButton
            {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="ButtonBar">
            <a class="PreviousButton"><span class="LinkButton">Previous</span></a>
            <a class="CancelButton"><span class="LinkButton">Cancel</span></a>
            <a class="NextButton"><span class="LinkButton">Next</span></a>
            <a class="AcceptButton"><span class="LinkButton">Accept</span></a>
        </div>
    </body>
</html>

background-color以外のすべてのCSSを.LinkBut​​tonクラスから削除すると、同じように機能します。これまでに行っていることを示すために、すべてを含めただけです。

この問題を解決するにはどうすればよいですか？

4

2 に答える 2

1

これらのスペースが実際にどこから来ているのか疑問に思ったことはありませんか？

<a>ギャップを引き起こしているのは、インライン要素間の改行です。

    <div class="ButtonBar">
        <a class="PreviousButton">...</a> <!-- Linebreak! -->
        <a class="CancelButton">...</a>   <!-- Linebreak! -->
        <a class="NextButton">...</a>     <!-- Linebreak! -->
        <a class="AcceptButton">...</a>   <!-- Linebreak! -->
    </div>

現在、最新のブラウザーはこれらの複数を折りたたんでいますが、IE7は折りたたんでいないため、実際には要素間に2つの改行があり、ギャップが2倍になります。

これにはいくつかの解決策があります。

1）要素をフローティング

2）マークアップの変更：

     <!-- end tag on the new line -->
     <a>...
     </a><a>...
     </a>...

     <!-- comments in between -->
     <a>...</a><!--
  --><a>...</a>

     <!-- all on one line -->
     <a>...</a><a>...</a>

     <!-- In some cases (e.g. list elements) you can skip the end tag -->

3）フォントサイズの変更

4）負のマージンを使用する-しかし、それは古いブラウザで問題を引き起こす可能性があります。

あなたが取りたい解決策はあなた次第です。

特別な場合、問題の要素を非表示にするだけで、その要素に対してabsolutepositionまたはanyfloatを宣言できます。

于 2013-02-14T10:40:11.713 に答える
1

1つの解決策は、float：leftONLYを.NextButtoncssクラスに追加することです。これは機能するはずです。

于 2013-02-14T10:42:11.553 に答える