CSS: Плавающее отделение правильному отделению контейнера причин для протяжения полной ширины экрана в IE

Question

CSS: Плавающее отделение правильному отделению контейнера причин для протяжения полной ширины экрана в IE

Я видел подобный вопрос здесь и не видел ответ. У меня есть проблема, куда элемент пускается в ход право в родительском отделении, и это заставляет отделение расширять всю ширину страницы в IE7. Этого не происходит ни в каких других браузерах (Firefox и Chrome). Я также разместил фотографии после вопроса для ссылки. HTML, который я использую, ниже:


    
        
            Testing

CSS, который я использую для этих тегов, ниже также. Одна вещь, которую я заметил последовательный между вопросом другого человека, на который ссылаются выше и моей проблемой, состоит в том, что у обоих родительских отделений есть примененное расположение (человек выше имеет абсолютный, я зафиксировал).

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

#journal .title_bar .actions
{
    float: right;
}

.clear
{
    clear: both;
}

Заметьте, что класс 'действий' пускается в ход право. Если я устраняю то плавание, мое поле похоже на это. Но с добавленным плаванием, это расширяет весь экран и похоже на это. Это известная ошибка IE, потому что этого не происходит ни в каком другом браузере, и это сводит меня с ума.

Для тех, которые задаются вопросом, я действительно имел содержание в отделении 'действий', но снял все вниз к корневой проблеме.

Любая помощь значительно ценилась бы.Большое спасибо.

7

css internet-explorer html css-float stretch

задан Community 23 May 2017 в 10:32

3 ответа

Другие вопросы по тегам:

css internet-explorer html css-float stretch

Похожие вопросы:

score 0 · Answer 1

Сделайте это

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
        Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div>

, а затем добавьте класс Css

. Test { float: right; }

должен это сделать, сообщите нам если не работает.

MNK

score 1 · Answer 2

Вам нужна ширина: * Плавающий блок должен иметь явную ширину (назначенную через свойство 'width' или внутреннюю ширину в случай замененных элементов). *

через: W3C

score 0 · Answer 3

Я не совсем уверен, чего вы хотите, поскольку вы не объяснили, что вы хотите сделать с div "actions", но если вы хотите, чтобы div "actions" плавал прямо рядом с div "Testing", я просто попробовал сделать отдельный класс .floatr, или это также будет работать, если вы просто примените стиль непосредственно к div.

.floatr {
float: right;
}

с классом .floatr, примените его к div "actions":

<div class="actions floatr"></div>

Я не знаю почему, но мне кажется, что div "actions" игнорирует настройку float в классе, который вы установили таким образом. Я лично предпочитаю применять несколько классов к div, что позволяет мне повторно использовать этот класс в других div, для которых мне нужен этот эффект, но я слышал, что некоторые браузеры игнорируют классы, объявленные после первого. Что ж, я пока не сталкивался с этой проблемой в основных браузерах...

О, подождите.

Я снова просмотрел код, и я думаю, что у вас просто была проблема с тем, как вы задали свои классы. Ваш div "actions" пропускал действие, попробуйте добавить запятую в CSS:

#journal .title_bar, .actions
{
    float: right;
}

Думаю, иногда, чтобы понять что-то, нужно применить эффект напрямую, чтобы убедиться, что он может вести себя так, как вы ожидаете, а затем, вероятно, решить, что это какая-то синтаксическая ошибка, если он работает. хех.