2010-02-04 2 views
7

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

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

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

#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; 
} 

Обратите внимание, что класс «действия» перемещается вправо. Если я уберу этот плавающий, мой бокс выглядит как this. Но с добавлением поплавка он растягивает весь экран и выглядит как this. Является ли это известной ошибкой IE, потому что это не происходит ни в каком другом браузере, и это сводит меня с ума.

Для тех, кто задавался вопросом, у меня был контент в div 'actions', но он убрал все до корневой проблемы.

Любая помощь будет принята с благодарностью. Огромное спасибо.

ответ

0

ли это

<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 { поплавок: право; }

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

MNK

+0

Спасибо за быстрый ответ. К сожалению, с «действиями» div все еще плавал вправо, он по-прежнему растягивал всю ширину страницы и просто «тестировал» в крайнем правом углу. Изображение здесь: http://i49.tinypic.com/5ap4bk.jpg –

1

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

через: W3C

+0

Так что это просто IE, у которого есть эта проблема, потому что, как я уже сказал, Firefox и Chrome не растягивают ее. Я бы предпочел не давать ему ширину набора, потому что содержимое в нем будет меняться динамически, и я хочу, чтобы ширина могла быть соответствующим образом расширена. –

+1

Кроме того, в каком поле вы указываете ширину? Я взял «float: right» из класса .journalIE с теми же результатами. –

0

Я не совсем уверен, что вы хотите, как вы не объясните, что вы хотели сделать с «действия» DIV, но если вы хотели «действия» дел до float прямо рядом с тегом «Тестирование», я просто попытался сделать отдельный класс .floatr, или он также будет работать, если вы просто примените стиль непосредственно к div.

.floatr { 
float: right; 
} 

с .floatr класса, применить это к «действиям» ДИВ:

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

Я не знаю, почему, но мне кажется, что «действия» ДИВ игнорирует настройки в поплавок класс, который вы задали таким образом. Я лично предпочитаю применять несколько классов к div, что позволяет мне повторно использовать этот класс над другими div, для которых я хочу этот эффект, но я слышал, что некоторые браузеры будут игнорировать любые классы, объявленные после первого. Ну, я еще не столкнулся с этой проблемой с основными браузерами ...

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

Я снова просмотрел код, и я думаю, что у вас возникла проблема с тем, как вы устанавливаете свои классы. Ваш «действия» ДИВ не хватает на действия, попробуйте добавить запятую в CSS:

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^