1

HTML

<div class="block">
    <div class="element1">text text text text </div>
    <div class="element2">text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

CSS

.block{
    background:#F00;
    float: left;
    height: 90px;
    padding: 0 24px 0 0;
    position: relative;
    width: 256px;
}   
.block .element1{
    color: #000;
    display: block; 
    float: left;
    font-size: 32px;
    height: 35px;
    overflow: hidden;
    padding: 25px 0 0;
    text-align: right;
    width: 100%;
}
.block .element2 {
    color: #000;
    display: block;
    float: right;
    font-size: 12px;
    height: 14px;
    line-height: 1.1;
    margin: 15px 0 0;
    max-width: 205px;
    overflow: hidden;
    padding: 0 0 0 15px;
    text-align: right;
    width: auto;
}

オーバーフロー: element2 クラスの隠し属性 => IE8、9、FF、Chrome、Safari、Opera では問題ありませんが、IE7 でページを開くとテキストが表示されません。ブロック クラス (ラッパー クラス) に position:relative 属性を追加しましたが、変更はありません ( overflow: hidden; に関する IE6 + IE7 CSS の問題 - position: relative;ombo ) 問題を解決するにはどうすればよいですか? http://jsfiddle.net/L5Y57/

4

1 に答える 1

5

私がコメントで言ったように。

position: relative;を使用するクラスにプロパティを追加する必要がありますoverflow: hidden。

また、別の問題があります。これはwidth: auto;、classesで、IE7 の既知のバグでもあり、解決するために固定幅または任意の幅.block .element2に変更するためです。width: 100%;

コードで私の修正を確認できます：http://jsfiddle.net/L5Y57/2/

于 2013-02-07T08:46:02.440 に答える