Включение максимальной ширины в Internet Explorer
Я реализовал максимальную ширину, чтобы содержимое для .name занимало 1 строку вместо 2 строк. Итак, вместо:
Боб Ли
это правильно выглядит
Боб Ли
в других браузерах. например хром
Я обнаружил, что IE не поддерживает максимальную ширину - как я могу исправить ситуацию, чтобы содержимое для .name также занимало всего 1 строку в IE?
я пробовал
article .picture {
width: expression(22 + "px");
}
но это ничего не дало.
.group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin, padding: 0px;
}
.group img {
width: 22px;
}
article .picture {
max-width: 22px;
width: expression(22 + "px");
}
.name {
font-size: 12px;
margin-left: 17px;
}
<article>
<a href = "#">
<div class = "photo" style = "background-image: url(img/img.jpg);"></div>
</a>
<div class = "text">
<div class = "A">Lorem ipsum</div>
<div class = "B">Lorem ipsum</div>
</div>
<div class = "C">
<div class = "group">
<div class = "picture"><img src = "img/sample.jpg"></div>
<div class = "name">Bob Lee</div>
</div>
</div>
</article>
Я считаю, что это не работает в IE 9, 10, 11. Ничего страшного, если IE 9 не работает, но я бы хотел, чтобы он работал в IE 10 и 11. Выражение () --> я видел это в сообщении в блоге и попробовал это
@roarsandmeows, почему бы вам не использовать white-space: nowrap;, чтобы избежать переноса имени во вторую строку?
@OzgurSar, потому что иногда имя длинное, поэтому на самом деле оно должно занимать 2 строки.
@roarsandmeows, но в первой строке своего вопроса вы написали, что пытаетесь избежать разделения имени на несколько строк. Извините за мое непонимание. Я не очень хорошо знаком с CSS для IE.
@OzgurSar Да, извините, я не совсем ясно выразился. Поэтому, когда имена короткие, например. Боб Ли, это будет 1 строчка. Но когда имена длинные, например. Бенджамин Франклин: это не умещается в 1 строку, поэтому должно быть 2 строки. Теперь, если я использую white-space: nowrap, Бенджамин Франклин тоже должен быть в 1 строке, но это будет выглядеть странно.
Если мы обратимся к документам , мы увидим, что max-width поддерживается в IE 11. Я пытаюсь протестировать ваш пример кода с длинным именем, которое вы указали в комментарии. Это результат теста. Это не выглядит странно и дает аналогичный результат для других браузеров. Если возможно, не могли бы вы предоставить снимок проблемы из браузера IE и из любого другого браузера, где она выглядит правильно? Это может помочь нам лучше понять проблему. Спасибо за понимание.
@Deepak-MSFT Конечно, вот оно imgur.com/a/A3oJ5TO Я не могу узнать, какую версию IE я проверял, т.к. "об Internet Explorer" в настройках отключено (это как узнать какая версия). Хм, документ говорит, что IE 9 также поддерживает максимальную ширину, но я не думаю, что это правда — я также тестировал IE 9 здесь browserling.com/internet-explorer-testing, но здесь тоже 2 строки.
Результат теста, который вы показали в предыдущем комментарии, получен непосредственно из браузера IE 11? Если да, я предлагаю вам предоставить правильный код для воспроизведения проблемы, так как с примером кода в исходном сообщении мы не можем создать проблему. Еще одна вещь, которую я хочу предложить, это попытаться провести тест с реальным браузером на вашем компьютере вместо того, чтобы тестировать проблему виртуально, используя некоторые сайты. Обратите внимание, что в настоящее время поддерживается только IE 11.
@Deepak-MSFT Я тестировал его в реальном браузере - я не могу узнать, 11 ли это версия или другая версия, потому что в настройках отключено «об Internet Explorer». Если max-width действительно работает для IE 11, я предполагаю, что это IE 10. Есть ли способ заставить его работать в IE 10?
Как я уже сообщал вам, в настоящее время поддерживается только IE 11. Если вы считаете, что у вас есть проблема с браузером IE 11, я предлагаю вам предоставить точный пример кода, поскольку стиль в вашем результате теста сильно отличается от результата теста, который я получил из кода, опубликованного в исходном сообщении.
@Deepak-MSFT jsfiddle.net/benjaminana77/8eLw4s1y/4 вот рабочий пример
@roarsandmeows, пожалуйста, обратитесь к ответу.
Ответы 1
Я пытаюсь проверить и протестировать пример кода в браузере IE 11 и обнаружил, что -ms-flex: 1; and flex: 1; в классе .name вызывает эту проблему.
В IE 11 есть некоторые проблемы с Flex. Это может быть причиной этой проблемы.
Если вы прокомментируете или удалите flex в классе .name, проблема будет исправлена.
.имя класса:
.name {
letter-spacing: 2.2px;
-webkit-box-flex: 1;
/*-ms-flex: 1;
flex: 1;*/
line-height: 1.6;
}
Выход:
С какой версией Internet Explorer у вас проблемы? Expression() — это то, чего я давно не видел.