1

たくさんのクリアフィックスハックinline-blockではなく、流動的でレスポンシブなデザインの一部として幅広く使用したいと思っています。float: leftHTML5 / CSS3がスペースを無視する方法を提供し、誰もがこの新機能をサポートするブラウザーにアップグレードするまで（つまり、運が良ければ5年）、この種のレイアウトを作成する際には常に問題が発生します。

ブラウザがインラインブロック間のスペースをレンダリングする問題を回避するために使用できるハックはたくさんあります。スペースなしでコードを記述したり、スペースをコメントアウトしたり、恐ろしいフォントサイズのハックなどがありますが、どれも私にとってそれほど素晴らしいとは感じません。bodyタグの一番下にインラインJavaScriptを追加する代わりに、次のことを考えています。

document.getElementById('base').innerHTML = document.getElementById('base').innerHTML.replace(/\x3e\s+\x3c/g, '\x3e\x3c');

基本的に、「スペースなしでコードを書く」実装の事後実装。私はそれをさまざまなブラウザでテストしましたが、それらはすべてそれにかなり満足しているようです-私の質問は：私が見ていない重大な隠れた危険がありますか？

ここでデモを作成しました：http：//jsfiddle.net/edwardc/wdz5t/

もちろん、実際にスペースが必要な場合もあるかもしれませんが、それらは簡単に処理できます。また、JavaScriptバインディングの脱落に問題がある可能性があります。本文の下部にあるスクリプトが実行された後、すべてのjQueryバインディングが常にアタッチされると確信しています。問題が発生した場合でも.on()、簡単に修正できるはずです。

4

2 に答える 2

2

投稿で言及した純粋な HTML/CSS メソッドは、Web サイトのユーザーがスクリプトを有効にする必要がなくても問題なく機能します。

これは、この CSS-tricks 記事のCodePen の例で、実際の動作ではあまり良くないと感じるすべてのメソッドを示しています。

あなたの JavaScript は一見すると (IE7 をサポートしたくないという条件で) 十分に優れたソリューションですが、フォールバックとして上記のメソッドのいくつかを適用することもできます。

于 2013-03-22T08:38:40.777 に答える
1

あなたの質問に関しては、ページのレンダリングに時間がかかるという事実を除いて、あなたが試みていることに本当のマイナス面はありません. JavaScriptの存在。2 回行うのを避けるためにできることの 1 つは、 を使用してページ コンテンツをラップすることnosriptです。

<body>
<noscript id="base">
  <!-- rest of your content goes here //-->
</noscript>
<script>
  document.write(
    String(document.getElementById('base').innerHTML)
      /// IE annoyingly entity encodes noscript content, so reverse
      .replace(/&gt;/gi,'>')
      .replace(/&lt;/gi,'<')
      /// deploy your space removal however you like
      .replace(/\x3e\s+\x3c/g, '\x3e\x3c')
  );
</script>
</body>

上記は、非 js ブラウザがページのレンダリングを開始するだけで、js 対応ブラウザは を実行するまで何もレンダリングしないことを意味しますdocument.write。

ただし、上記をお勧めすることはできません。また、display: inline-blockあなたがやろうとしていることのために使用することもできません...

基本的に、float を使用することに大きな問題があるとは思わないためです — おそらく、ブラウザが予期しない空白をレンダリングするのが少し面倒だと思うからでしょう — 私にとっては、このような策略よりもはるかに簡単で安定しており、続く：

<ul class="overflow-fix">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

css は次の場所にあります。

.overflow-fix {
  overflow: hidden;
}

li {
  float: left;
}

何年にもわたる Web 開発の中で、float 内からコンテンツをオーバーフローさせる必要がある状況に遭遇したのは 1 つだけです。また、インライン コンテンツをセンタリングする必要がないように思えますが、これは運が良かっただけかもしれません。

ジェームズ・ドネリーに+1 - 彼は確かに正確で正しい答えを与えたinline-block. しかし、私には、マークアップ レイアウトを台無しにするようなことは、最後の手段になるまで避けるべきだと思います。

于 2013-03-22T10:00:51.380 に答える