1

IE7 で動作する必要があるリストで、縦に並べられた項目を操作しています。このページのコードを参照してきましたが、これはクロスブラウザーでうまく機能するようです。

IE7 で、最初のリスト項目がその中の要素の幅に合わせて拡大されないという問題が発生しています。以下は私のコードへのリンクです。

http://jsfiddle.net/grimmus/jUFMJ/

      <ul>
      <li>
          <div class="outerContainer">
              <div class="innerContainer">
                  <div class="element">
                    <a href="#">
                        To Verify
                    </a>
                  </div>
              </div>
          </div>
          <div class="outerNumber">
              <div class="innerNumber">
                  <div class="element">
                    <a href="#">
                        3903
                    </a>
                  </div>
              </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Authorize</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">View Payments</</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Submit/Modify</a></div>
          </div>
          </div>
      </li>  
  </ul>

リスト内の項目は動的であるため、各 LI に特定の幅を割り当てることは実際には不可能です。

特定の幅なしで子要素に合わせてリスト項目を拡張する方法を知っている人はいますか?

4

1 に答える 1

0

そこには IE7 固有のハック (つまり*ハック) が山ほどありますが、正直なところ、それらのいくつかは状況を改善するどころか悪化させています。

IE7 にはいくつかの CSS の問題があり、CSS のハッキングが正当化されることもありますが、ここで行っていることが実際に役立つとは思いません。

ハッキングされた CSS コードの一部を無効にするだけで、作業が大幅に改善されました。

たとえば、 を.items li .outerContainer .innerContainer .element a指定position:absoluteしますが、IE7 のみです。これにより、要素の配置方法が完全に変更され、もちろんうまくいきません。

と.items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element指定しますtop:-50%。これが、ほとんどのコンテンツを箱から出してしまう原因です。これを無効にすると、コンテンツが再び表示されます。適切な場所ではありませんが、目に見えて使用可能です。

したがって、私が提案する最初のことは、現在の IE7 ハックをすべて削除することです。彼らは物事をより良くするのではなく、壊しています。

これらのハックを削除すると、メニューが IE7 で使用できるようになります。見た目は完璧ではありませんが、使えます。そして、個人的にはそのままにしておきます。あなたは、IE7 で動作するサイトが必要だと言います。それが動作します。他のブラウザほどきれいに見えないかもしれませんが、動作します。

本当にIE7 でピクセル パーフェクトにする必要がある場合は、はい、いくつかの IE7 ハックが必要になる場合があります。ただし、すでに試したものとは異なります。あなたは彼らともう少し微妙になる必要があります。おそらく、padding-topオン.elementなどを調整して、テキストをより中央の位置に移動するだけです。

それが役立つことを願っています。

[編集]問題を解決する方法についてのさらなる考え...

一部の要素が 2 行にまたがっているため、これpadding-topは難しいとおっしゃいました。これにより、単一のスタイルを使用してすべての要素を正確にパディングすることが実際に難しくなります。どちらが長くなるかを事前に知っていれば、他のパディングとは異なるパディングを与えることができますが、これは問題になる可能性があることを認識しています.

もう 1 つの角度から考えられるのは、Javascript です。IE7 だけでこの問題を解決するための小さな JavaScript は、達成するのが非常に簡単で、他のブラウザーに影響を与える必要はありません。

IE9.jsやSelectivizrなどの JS ポリフィル ライブラリの使用を検討することもできます。これらは、古いバージョンの IE にある CSS の問題や不足している機能を修正しようとします。

于 2013-06-12T19:53:30.760 に答える