CSS DIV Ширина по умолчанию выглядит хорошо в IE. Не Firefox - PullRequest
Новая
       11

CSS DIV Ширина по умолчанию выглядит хорошо в IE. Не Firefox

0 голосов
/ 24 апреля 2009

Я создал пример того, с чем я здесь сталкиваюсь: http://studiozion.com/cssproblem/fix_it.htm.

Соответствующие блоки кода ... 

<style type="text/css">
body
{
    background: transparent url(Grade300_Color1.png) repeat-x 
    }
.RowMaker
{
    overflow: auto;
}
.ColumnMaker
{
    float: left;
}
.ColumnMaker2
{
    float: right;
}
.PadTop
{
    padding-top: 10px;
}
.PadBot
{
    padding-bottom: 10px;
}
.PadLeft
{
    padding-left: 15px;
}
.PadRight
{
    padding-right: 15px;
}
.ControlCurve1
{
    height: 6px;
    background: transparent url(ControlCurve1.png) no-repeat right -6px
    }
.ControlCurveRight1
{
    height: 6px;
    width: 6px;
    background: transparent url(ControlCurve1.png) no-repeat top left
    }
.ControlCurveLeft1
{
    height: 6px;
    width: 6px;
    background: transparent url(ControlCurve1.png) no-repeat bottom left
    }
</style>
<div class="RowMaker">
    <div class="ColumnMaker ControlCurveLeft1"><span></span></div>

    <div class="ColumnMaker ControlCurve1">
        <div class="RowMaker">
            <div class="ColumnMaker2 ControlCurveRight1"><span></span></div>       
        </div>
    </div>
</div>

Таким образом, проблема в том, что div с классом "ColumnMaker ControlCurve1" будет расширяться, чтобы заполнить ширину родительского контейнера классом "RowMaker" в IE, создавая симпатичную маленькую скошенную крышку для div. Но в Firefox div «ColumnMaker ControlCurve1» усекается, в результате чего правая сторона скошенной крышки выравнивается по левому краю.

Так кто же прав? И что более важно, как мне исправить это, сохранив при этом гибкость визуального элемента, который расширяется до его родительского контейнера? Я действительно не хочу устанавливать жесткую ширину для "ColumnMaker Control1".

Ответы [ 2 ]

0 голосов
/ 24 апреля 2009

вам нужно очистить ваши поплавки. в таблицу стилей включите следующий код для CONTAINER , в котором есть плавающие элементы: 

#yourContainer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

вы также можете (и должны также) очистить свои значения для IE, поставив min-height: 10px; в своем определении стиля #yourContainer.

Также возможно, что, поскольку у вас нет содержимого и вы не задали ширину, div не будет растягиваться ни до чего.

Просто некоторые мысли, смотрящие на это без реального тестирования.

0 голосов
/ 24 апреля 2009

Firefox всегда правильный (J / K)

эта проблема уже была решена много раз. Могу ли я предложить быстрый поиск, чтобы найти такие вещи, как

http://redmelon.net/tstme/4corners/

http://kalsey.com/blog/2003/07/rounded_corners_in_css/

есть также решение jquery

http://www.malsup.com/jquery/corner/

...