Ширина CSS div'ов становится равной 100%, если в IE 8 значение float установлено вправо, но отлично работает в Firefox и Chrome. - PullRequest
Новая
       12

Ширина CSS div'ов становится равной 100%, если в IE 8 значение float установлено вправо, но отлично работает в Firefox и Chrome.

1 голос
/ 29 октября 2010

Итак, вот моя проблема с CSS в IE 8.

У меня есть родительский div и 2 дочерних div. Я хочу, чтобы ширина родительских элементов увеличивалась в зависимости от ширины элементов внутреннего -членда. Это хорошо работает в Firefox, но в IE8 ширина первого дочернего элемента div равна всей ширине страницы, когда у меня есть float:right для внутреннего элемента этого элемента div.

Моя HTML-разметка 

<div class="divPageContainer">   
    <div id="pnlOrderOptions" class="pnlOrderOptions">      
        <div class="divOrderOptions">      
            some content           
        </div>    
    </div>
    <div class="divOrderDetails" id="pnlOrderDetails">
        <div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
    </div>
</div>

и CSS 

.divPageContainer  
 { width:auto; 
   float:left; 
   margin-left:8px;
   height:auto;
   border:1px solid black;
 }
 .pnlOrderOptions 
 {
   min-height:10px; 
   height:auto;
   overflow:auto;
   margin-top:30px; 
   border:1px solid orange;
   width:auto;
 }
 .divOrderOptions 
  {
    margin-left:7px; 
    font-family:Verdana;
    font-size:12px; 
    width:400px; min-height:10px;height:auto;
    border:1px solid #858A8D;
    float:right; padding:5px;
    background-color:#F0F6F8;
  }
  .divOrderDetails 
  { 
    float:left; 
    margin-top:4px;padding:3px;
    border:2px solid blue;
    min-height:10px;height:auto;
  }

Хорошо работает в Firefox; вот оно:

alt text

И в IE я получаю (я уменьшил ширину div с красной рамкой до 400 с 800, чтобы получить хороший снимок, потому что у меня широкий монитор)

alt text

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

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

1 Ответ

3 голосов
/ 29 октября 2010

Плавающая вещь - это известная ошибка в IE и FX 2 .

Можете ли вы использовать display:inline-block; вместо этого?Есть способ заставить его работать на не встроенных элементах для IE .

EDIT: вам нужно установить text-align:right на родительском элементе inline-block.

РЕДАКТИРОВАТЬ # 2: Вот пример исправления, о котором я говорил: http://work.arounds.org/sandbox/64/run

Пожалуйста, дайте мне знать, если это не то, что вам нужно или оно не работаетдля вас.

...