Хобрук: Ваш путь к мастерству в программировании

IE неправильно выравнивает текст и изображение

В Chrome изображение и текстовая ссылка выровнены правильно. Однако, когда я проверил это в IE8, я заметил, что изображение и текстовая ссылка не выровнены должным образом.

Вот код, который я использую. это код, который я использую в шаблонах Wordpress wpfilebase.

<td style="width:350px;padding-left:20px;">
    <a href="%file_url%"> 
       <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
    </a>
    <span style="width:200px;float:right;vertical-align:text-top;">
    <a href="%file_url%"> %file_display_name%</span></a>
</td>

представление IE

Просмотр Chrome

Chrome отображается правильно, но не IE. Как это исправить? Если мне нужно использовать условный CSS для IE, какой правильный код для IE?

html css internet-explorer html-table
27.08.2013

  • Вы меняете версию IE и проверяете свой код. 27.08.2013

Ответы:


1

Ваш тег span закрывается раньше, чем вы закрываете тег a. Исправленный код:

 <td style="width:350px;padding-left:20px;">
   <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
   </a>
   <span style="width:200px;float:right;vertical-align:text-top;"> 
     <a href="%file_url%">%file_display_name%</a>
  </span>
</td>
27.08.2013
  • Кроме того, еще одна особенность IE — использование интервалов. Я бы также попробовал переместить диапазон перед тегом ‹ a›. 27.08.2013
  • Есть ли в IE8 проблемы с элементом span? 27.08.2013
  • Я видел, как это происходит с IE7. 27.08.2013

    • 2

    Попробуй это,

    <td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a>
    <span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </span>
</td>

    Используйте padding-left в элементе span и удалите из него float property.

    27.08.2013
  • Но когда текстовое имя длиннее, то остальная часть текста идет под изображением. 27.08.2013
  • затем используйте min-width:200px вместо width:200px в span element 27.08.2013
  • почему вы определяете alt два раза? 27.08.2013
  • Use padding-left in span element and remove float property from it. не могли бы вы объяснить причину этого? 27.08.2013

    • 3

    Использование тега div вместо span решило мою проблему.

    <td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <div style="float:left;"><a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a></div>
    <div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </div>
</td>
    27.08.2013
    Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..