8

これは、ブラウザー間の互換性に関するかなり一般的な質問です。

デザインのさまざまな時点で、私が望むレイアウトとスタイルを (画像を使用せずに) 達成する唯一の方法は、display:inline-blockcss スタイル オプションを使用することです。ただし、これは IE8 やその他の古いブラウザーではサポートされていないため、デザインが壊れてしまいます。

したがって、私の質問には 2 つの部分があります 1 - IE8 で同様または同等の効果を達成する方法はありますか? 2 - そうでない場合、デザインをスムーズに劣化させるにはどうすればよいですか?

参考までに、これが私の設計で使用されている場所の例を次に示します。

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

チャートの色を説明する 20x20 ピクセルのカラー ブロックです。

より一般的には、この問題は、テキスト本文内の特定のテキストなどの書式設定とレイアウトの制御を強化したい場合に発生します。

私が現在取り組んでいるデザインでは、キャンバス要素に大きく依存しているため、とにかく古いブラウザー タイプのサポートを中止します。ただし、これまでに何度か問題に遭遇したため、これは良い質問だと思いました。

ありがとう

4

4 に答える 4

9

このトピックをカバーする優れたリソースは次のとおりです: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本的に IE には「hasLayout」というトリガーがあります。これをトリガーするとdisplay:inline-block、ブロック レベルの要素で使用できるようになります (既定では、IE はネイティブのインライン要素でのみインライン ブロックを許可します)。

さらに、古いバージョンの Fire Fox はインライン ブロックもサポートしていませんでしたが、「インライン スタック」値 ( moz-inline-stack) を持っていました。

私の知る限り、クロスブラウザを入手する最良の方法は次のdisplay:inline-blockとおりです。

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
于 2012-09-24T14:46:26.480 に答える
0 
  display: inline-block; 
  *zoom: 1; 
  *display: inline;

他のブラウザではインラインブロックを追加できますが、IE では *. それはすなわちでのみ動作します

于 2014-02-15T15:58:37.383 に答える
0

このコードを使用してください

*display: inline;
*vertical-align: middle;
于 2012-09-24T16:03:51.310 に答える