2011-12-13 59 views
9

テーブルにテキストを表示したいが、150pxよりも幅が広い場合にカットしたいが、テーブルセルの幅を固定したくないテキスト、幅は0ピクセルです)。 IE9、Firefox、Chrome、Operaではすべて動作しますが、IE8では動作しません。IE 8のオーバーフロー:hiddenとmax-width

IE8でのコード例:Chromeで

enter image description here

コード例:

enter image description here

は、ここでは、コードです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
td, span { 
    border: 1px solid red; 
    max-width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

span { 
    border: 1px solid green; 
    display: block; 
} 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td> 
    <td>Works in Firefox, Chrome (and Opera but no dots)</td> 
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td> 
</tr> 
</table> 
</body> 
</html> 

どんなことなく、そうすることも可能ですjavascriptまたは固定設定幅?

+0

、私がいた場合、私は誰かがIE8でurページを開くとジャバスクリプト警告を送信するだけです。あなたのページをバグのあるIEブラウザと互換性を持たせることを邪魔しないでください。それはMicrosoftのせいです。 – ApprenticeHacker

+0

最初のセルについては、IE7では動作しないようです。私はIE9でしか動作しないのではないかと心配しています。 –

+0

@IntermediateHacker CSS 2.1仕様によれば、表のセルに対するmax-widthの効果は未定義です。スペックは、Microsoftではなく、間違いです。 – ZippyV

答えて

5

残念ながら、IE7とIE8はmax-width CSSルールに非常にバグがあります。だから、JavaScriptや固定幅なしでは、それを確実に行うことはできません。助けがあれば、コードはとなります。はIE 7+で動作します。

しかし、あなたは上記の持っているルールの後に、条件付きCSSルールを追加することにより、これら2つのブラウザのためにそれだけで一定の幅を作ることができる:

<!--[if lte IE 8]> 
    <style> 
    td, span { 
     width: 150px; 
    } 
    </style> 
<![endif]--> 

後で外部ファイルにあなたのCSSを移動すると、あなたがのだろう

また
<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8.css" /> 
<![endif]--> 

、あなたはJavaScriptでIE 7と8を検出することができ、このページにユーザーをリダイレクトします:リンクタグにすることを進路変更率直に言ってhttp://www.mozilla.org/de/firefox/new/

+0

maxWidthはWindows Internet Explorer 7で導入されました。 – ZippyV

+0

はい、これは間違いありません。しかし、この質問のコードが示すように、IE 7と8では非常にバグがあります。私は自分自身が1台のコンピュータ上で(IE 7/8で)動作することを目撃しましたが、別のコンピュータでは動作しませんでした。ロレンツォが指摘しているように、それは彼にとってもうまくいきませんでした。更新に依存する可能性が最も高いですが、理由が何であれ、これらのブラウザでは明らかに信頼できません。 – Donamite