IE7 - 背景色が広すぎる -- html フィールド と css フィールド と internet-explorer-7 フィールド 関連 問題

IE7 - Background-color is too wide












0
vote

問題

日本語

画像の上にいくつかのテキストがあります。

新しいブラウザではうまく機能しています。

しかしIE7をチェックインすると、次のようになります。 画像の説明を入力します。

どういうわけか、IE7は非常に熱心で、背景色を100%の幅に与えることに。 そして、テキストの長さはページからページまで変わるため、幅を設定することで、それを修正していません。

私のCSSは次のようになります:

<事前> <コード> #sub-slideshow-wrapper h2 { font-family: 'Droid Sans',sans-serif; display: table; font-size: 20px; font-weight: 900; color: #000; background: #e68e47; background: rgba(230,142,71,0.8); padding: 7px; margin: 0 0 3px 0; }

そして私はIE7が古くなっていることを知っており、1.xxxのみがUSNIGです。しかし、私はそれがすべてのブラウザ、さらに古いものに取り組むために捜査です。

英語

I have some text on top of an image.

In new browsers it's working fine.

But when I check in IE7, it looks like this: enter image description here

Somehow, IE7 is very keen, on giving the background color a width of a 100%. And I don't wanne fix it, by setting a width, since the length of the text will vary from page to page.

My CSS looks like this:

#sub-slideshow-wrapper h2 { font-family: 'Droid Sans',sans-serif; display: table; font-size: 20px; font-weight: 900; color: #000; background: #e68e47;  background: rgba(230,142,71,0.8); padding: 7px; margin: 0 0 3px 0; } 

And I know that IE7 is outdated, and that only 1.xxx is usnig it. But my is expection it to work on all browsers, even old ones.

</div
        

回答リスト

1
 
vote
vote
ベストアンサー
 

サポートIE7の追加ズーム:1と*表示:Inlaine(ターゲットIE6&amp; 7)をinline-block;それらがインラインブロックであるかのようにそれらを表示するようにする。 <強い>しかしこれはあなたが望まない他の効果があるかもしれません。

<事前> <コード> #sub-slideshow-wrapper h2 { font-family: 'Droid Sans',sans-serif; zoom: 1; /* added */ *display: inline; /* added */ display: table; font-size: 20px; font-weight: 900; color: #000; background: #e68e47; background: rgba(230,142,71,0.8); padding: 7px; margin: 0 0 3px 0; }
 

If you must support IE7 add zoom:1 and *display:inline (star hack to target IE6 & 7) to make IE 7 display them as if they were inline-block. However this may have other effects you do not want.

#sub-slideshow-wrapper h2 { font-family: 'Droid Sans',sans-serif;  zoom: 1; /* added */ *display: inline; /* added */  display: table; font-size: 20px; font-weight: 900; color: #000; background: #e68e47;  background: rgba(230,142,71,0.8); padding: 7px; margin: 0 0 3px 0; } 
</div
 
 
0
 
vote

、IE7は<コード> display:table <コード> h2 は、 display:block (<コード> display の標準<コード> 99887666 )でレンダリングされ、問題が発生します。 IE7のグローバルな使用量は約0.1%であるため、私はあなたがそれをそのまま残すだけのことを提案します。

 

As you can see here, IE7 does not support display:table so your h2 is rendered with display:block (the standard display for h2), causing your problem.

As the global usage of IE7 is about 0.1%, I suggest you just leave it as it is.

</div
 
 
   
   

関連する質問

7  IE7 / 8のコルシャンは尊敬されていません  ( Colspan in ie7 8 not respected ) 
DOMは次のようになります。 <事前> <コード> <table> <tr> <td>a</td>...<td>g</td> </tr> <tr> <td colspan="3"> <table> .....

1  IE7の不要な水平スクロールバー  ( Unwanted horizontal scroll bar in ie7 ) 
私は IE7を除いて大規模な水平スクロールバーがあります。 HTMLコード全体とCSSコード全体を貼り付ける必要があるので、ページソースを参照します。 サイトを見ることができます あらゆる援助は大いに感謝されるでしょう。 ありがとう。 ...

3  PAGEがフレームセットの一部であり、垂直方向にサイズ変更されている場合、Body OnResizeイベントはIE7で起動しません。  ( Body onresize event does not fire in ie7 when page is part of a frameset and res ) 
私は2つのフレームを垂直に持つ単純なフレームセット、すなわち2行: 最初の行には固定ヘッダが含まれています。 2行には上部に固定ツールバーが含まれており、サイズ変更可能な位置は下部にあります。 ブラウザ間の違いをレンダリングすることで、「コンテンツ」フレーム...

0  ブロックレベルのアンカーテキストの周りのスペースを取り上げない[IE7]  ( Block level anchor not taking up space around text ie7 ) 
私はいくつかの簡単なCSSを持つアンカータグを持っています: <事前> <コード> div { background-color: gray; /* for debugging */ } div a { display: block; paddi...

13  スクロールバーがコンテンツの重なり合うのを防ぐ方法  ( How to prevent scrollbars from overlapping the content ) 
私は水平方向にオーバーフローするプリフォーマットのコード( <事前> <コード> overflow: auto; しかし、IE7(他のIEバージョン)では、スクロールバーは私のコンテンツの最後の行と重なっています(これは特に1行のコンテンツがあるときに刺激...

0  IE7浮遊ULのリストスタイルを殺す  ( Ie7 killing list style on floated uls ) 
私は2つのUL(.listoneと.listtwoが尊敬しています)浮上し、その他の権利を持っています。リストスタイル:サークル; IE7 =&LTを除くすべてのブラウザで機能します。 。 IE7ではリストスタイルは無視されます。どうすればいいですか? ...

0  IE7 CSSホーバーの問題  ( Ie7 css hover issue ) 
2つのメニュー、水平ドロップダウンと垂直メニューを作成しました。これらの両方がIE8、Chrome、Firefoxでうまく機能しますが、IE7で奇妙な問題が発生しています。 ここでJSFIDDLEを見ることができます: http://jsfiddle.net...

1  浮遊すぎる  ( Floating too far right ) 
1つの画面上のマスターレコードを表示するレコード管理WebアプリケーションとAjaxesはエディタのDIVに動的に構築されたエディタを作成しました。それはうまくいきます。 DIVがウィンドウではないが、それがそれをもう少し行動させるのはいい考えだかもしれな...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

0  jQuery GalleriaとIE7の問題  ( Problems with jquery galleria and ie7 ) 
次にやるべきことを理解することができないという問題があります。私はHTMLページでjQuery Galleeriaを使用しているウェブサイトを持っています。ページ上部にある10枚の写真の自動再生スクロール。古典的なテーマを使用しており、非常に基本的な機能です。...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有