css отображает div внутри Tr отлично в FireFox, но IE увеличивает ширину строки - PullRequest
Новая
       15

css отображает div внутри Tr отлично в FireFox, но IE увеличивает ширину строки

0 голосов
/ 06 апреля 2010

Мне трудно понять, что происходит и как это исправить.

У меня есть несколько div, которые содержат значки, которые вызывают проблему ширины при отображении табличных данных. Если я удаляю div, содержащие значки, ширина строки заканчивается так, как я хочу (см. Пример Firefox ниже).

Вот то представление в Firefox, которое мне нужно (обратите внимание на расположение значков, обведенных красным, которые выровнены по той же координате y или около того): альтернативный текст http://www.redsandstech.com/ff_display.jpg

Вот представление в IE7 (обратите внимание, что происходит с иконками и шириной серой линии, которая является строкой таблицы): альтернативный текст http://www.redsandstech.com/ie_display.jpg

Вот HTML: 

<table>
 <tbody>
  <tr>
    <td>
        <span>stuff 1</span>
        <span>stuff 2</span>
        <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div>
        <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div>
        <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div>
        <div style="display:none;"> 
             <div>Links Here</div>
        </div>
     </td>
  </tr>
</tbody>

Вот CSS: 

.prop_edit{
float:right;
position: relative;
top: 0px;
right:50px; 

}
.prop_archive{
    float:right;
    position: relative;
    top: 0px;
    right:10px;
}
.prop_delete{
    float:right;
    position: relative;
    top: 0px;
    right: -30px;
}
.img_height14{
    height:14px;
    vertical-align:top;
    position:relative;
}

Я перепробовал кучу разных вещей css, но на самом деле просто взламываю в надежде что-нибудь выяснить. У кого-нибудь есть советы, которые могут мне помочь?

Заранее спасибо.

1 Ответ

0 голосов
/ 06 апреля 2010

Зачем вам нужно деление? Просто поплавайте сами изображения вправо. Как я уже говорил миллиону других людей, вы не можете использовать разделения внутри таблицы, не получив побочных эффектов, которые вы просто не можете исправить, они не должны быть там.

Я предполагаю, что right: -30px интерпретируется как добавление 30px к правой стороне, чтобы освободить место для него. Однако, гораздо проще будет поместить плавающие изображения вправо, и вы можете добавить поле вокруг них, чтобы правильно расположить их.

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

Так что да, есть несколько разных вещей, которые вызывают проблемы. Это не единственное, что вызывает все проблемы.

...