min-width в режиме совместимости с IE

Цель: сделать так, чтобы кнопки имели минимальную ширину, но расширялись, когда текст длиннее минимальной ширины, как в случае с другими языками.

Проблема в том, что в IE8 или 9 в режиме совместимости кнопки, кажется, перемещаются за пределы своего контейнера вправо. К сожалению, я не могу предоставить какой-либо код или ссылку на jsfiddle, поскольку он не работает в режиме совместимости с IE8, но вот несколько изображений проблемы.

Нет минимальной ширины
Кнопки отображаются нормально, но явно не показывают минимальную ширину, которую мы хотим. Нет минимальной ширины

С минимальной шириной
Макет IE показывает ширину 100 пикселей, какой она и должна быть, но кнопка, кажется, перемещается за пределы контейнера (см. правый нижний угол изображения). Также обратите внимание, что текст другой кнопки больше не находится в центре, что, как я полагаю, связано. мин. ширина вызывает проблемы

HTML

<table width="97%" border="1" class="whiteTable" style="margin: 10px;">
    <tr>
        <td colspan="2">
            <div style="position: static; float: left; z-index: 1; width: 100%">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            <div id="pnlInfo">
                                <input name="ucAttrEdit$cmdInfo" class="button small" id="ucAttrEdit_cmdInfo" type="submit" value="Info" />
                            </div>
                        </td>
                        <td align="right" colspan="2">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="Pad5">
                                        <div id="pnlOk">
                                            <input name="ucAttrEdit$cmdOk" class="button small" id="ucAttrEdit_cmdOk" type="submit" value="OK" />
                                        </div>
                                    </td>

                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

CSS

button,
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  color: #FFF;
  border: 0;
  padding: 3px;
  font-size: 13px;
  display: inline-block;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  width: auto; }

button.small,
  .button.small,
  input[type="submit"].small,
  input[type="reset"].small {
    min-width: 100px; }

.Pad5{padding:5px}

table.whiteTable {
  background: #F6F6F6;
  border: 1px solid #CCC; }

Примечание. Использование приведенного выше кода и перевод IE9 в режим браузера: режим совместимости с IE9 и режим документа: стандарты IE7 повторяют мою проблему.


css internet-explorer ie8-compatibility-mode
person Jason Kaczmarsky    schedule 02.10.2013    source источник
comment
Я не уверен, как помочь вам без кода для просмотра.   -  person 1934286    schedule 03.10.2013
comment
Пожалуйста, предоставьте html и css. Мы можем попробовать повторить в новом файле вместо jsfiddle. display:inline-block и min-width были новыми в IE8. Я не удивлен, что у вас проблемы с режимом совместимости.   -  person Kraz    schedule 03.10.2013
comment
Я добавил часть кода, который у нас есть. Это старый проект веб-форм, поэтому много таблиц и хлама. Меня тоже не удивляют проблемы с режимом совместимости, но наше приложение должно работать в нем, поскольку изначально все было сделано для работы только в IE6, но я конвертирую некоторые вещи для работы в Chrome.   -  person Jason Kaczmarsky    schedule 03.10.2013
comment
Вы не предоставили достаточно кода. Проблема out of container может быть связана с Pad5 или pnlOk... Укажите код хотя бы для полной строки (да, кнопки info тоже). Решение, вероятно, будет включать условный CSS, потому что width действует как min-width, например, в режиме причуды.   -  person Kraz    schedule 03.10.2013
comment
Я добавил весь ряд, трудно убрать все это. Я знаю, что min-width действует как ширина, но это не объясняет, почему он перемещается за пределы контейнера.   -  person Jason Kaczmarsky    schedule 03.10.2013
comment
@JasonKaczmarsky О боже, позвонили в Y2K и хотят вернуть свои столы! ;) Мои симпатии.   -  person nietonfir    schedule 03.10.2013

Ответы (1)


arrow_upward
4
arrow_downward

Итак, я нашел проблему.

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

IE7 нуждается как в width, так и в min-width, а width:auto вызовет эту проблему.

Итак, как теперь решить?

Используйте условный CSS

<style>
  input {width:auto} /*for ie6-7*/
</style>
<!--[if lt IE 7]>
<style>
  input {width:100px} /*for ie6-7*/
</style>
<![endif]-->

(Примечание: эти css недостаточно специфичны и перезаписываются вашей таблицей стилей. Вы должны их изменить)

...Или вы можете использовать скрипт по ссылке выше.

Изменить: попробуйте этот CSS:

(лучшее, что я мог сделать)

<style>
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  border: 0;
  padding: 3px;
  font-size: 13px;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  }

/*
button.small,
  .button.small,
  input[type="submit"].small,
  input[type="reset"].small {
    min-width: 100px; }*/

.Pad5{padding:5px}

table.whiteTable {
  background: #F6F6F6;
  border: 1px solid #CCC; }


  .button,input[type="submit"],input[type="reset"] {width:auto; color:#fff; display: inline-block;min-width: 100px;} 
</style>
<!--[if IE 6]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:100px; color:#ff00ff;display: block} 
</style>
<![endif]-->
<!--[if IE 7]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:auto; color:#ffff00;display: block; min-width:auto;} 
</style>
<![endif]-->
person Kraz    schedule 02.10.2013
comment
Это снова правильно позиционирует кнопку, однако больше не позволяет кнопке расширяться, если текст слишком велик для кнопки. - person Jason Kaczmarsky; 03.10.2013
comment
Мх, хак работает для каждой версии ie. Итак... используйте условные комментарии (я отредактировал свой ответ). - person Kraz; 03.10.2013