0

http://www.alecos.it/new/125027/125027.phpこのリンクは私の問題の例です...行を描画するためにpng 1x16を使用しました...行は投稿されたリンクに表示されます.. . 私の質問は:

IE 6/8、FireFox、Opera、Safari、およびその他のブラウザでは行がテキストに完全に整列しているのに、IE 9/10/11 ではテキストが行に収まらないのはなぜですか?

私は単純なcssを使用しました：

/* Style Source Code */
.code {
  border-radius: 7px;
  border: #6666FF 1px solid;
  background-color: #FFF5EE;
  background-image: url("../bkg/Bkg_116.png");  /* Horizontal Rows */
  background-repeat: repeat;
  background-position: 0 10px;
}
/* Style Source Code */
.xcode {
  color: #008000;
  font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
  font-size: 13px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
}

/* Style Div */
.alignment {
  line-height: 20px;
  text-align: justify;
}

問題を解決するための回避策を願っています...

ここに私の CSS があります: http://www.alecos.it/css/alecos.css

4

4 に答える 4

0

内部のテキストを.xcode水平線に揃えるためには、「コード」行を垂直に配置する必要があります。line-height残念ながら、プロパティの意味を理解しておらず、デフォルト値をそのまま使用しているようです。

line-height プロパティ

ここに画像の説明を入力

ご覧のとおり、line-heightプロパティは 2 行のテキストの距離を決定します。16pxあなたの場合、のブロック全体の中に正確にある必要があります.xcode。

プロパティの値のnormal値line-height

W3C CSS 仕様から、 value のnormal値は次のように定義されます。

要素のフォントに基づいて、使用される値を「妥当な」値に設定するようにユーザー エージェントに指示します。値は と同じ意味です。1.0 から 1.2 の間の「通常」の値を使用することをお勧めします。

この記事やこのページなどのオンライン リソースから、値の実際の値はnormal、フォント サイズ、フォント ファミリ、OS、ユーザー エージェントなどの多くの引数に依存することがわかります。したがって、いくつかのCSSを使用することをお勧めします。スタイルシートを正規化line-heightし、クロスブラウザの値を正しく設定します。

あなたのケースについて

ここでの簡単な修正は、クラスline-height内を(背景画像の高さ) に設定することです。.xcode16px

于 2013-08-16T13:35:25.640 に答える
0

.alignment {line-height: 20px;}
によって支配される.xcode line-height normal;

IEは正常ではありません;）

h1、p、font などのコンテンツ タグのほかに、周囲の余白/パディングがわずかに異なります。したがって、応答しない img は最善の方法ではありません。

各行をスパン、div、またはそのテーブルがtr、tdであるため、それらにボーダーボトムを与えることができればより良いでしょう。

Gr. ケビン

于 2013-08-16T13:09:04.307 に答える
0

私は現在Windowsマシンを使用していませんが.xcode(line-height:16px;}、問題は解決すると思いますが、これは行の境界線を作成する方法が間違っていると言わざるを得ません。追加しない理由:

.xcode td{border-bottom:1px solid #ddd;}

背景画像を使用する代わりに？

于 2013-08-16T12:49:47.873 に答える
0

Firefox は、次の更新まで一時的に古くなっています。つまり、Firefox には、他のブラウザーと同じようにコードを処理する機能がありません。

于 2013-08-16T13:01:50.400 に答える