Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2018, 09:05
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

display: flex в IE10 (11)
Всем привет. Столкнулся со следующей проблемой. Если кто-нибудь сталкивался, подскажите пожалуйста.
<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>

Если у тега a (в данном случае) установлено свойство: display: flex, то текст в IE не переносится на новую строку. Как данную проблему решить?
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2018, 10:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от s24344
текст в IE не переносится на новую строку
У меня переносится...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
a {
	display: flex;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>
</body>
</html>

Последний раз редактировалось ksa, 14.08.2019 в 15:01.
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2018, 13:31
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Простите, я привел не корректный пример. Ниже приведена верска с существующей проблемой в IE10
<ul class="list">
  <li class="list__item"><a class="list__link" href="#"><span>First</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Second</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Third</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></li>
</ul>

.list {
  display: flex;
  max-width: 1170px;
  margin: 0 auto;

  &__item {
    padding: 25px 18px;
  }
}

Последний раз редактировалось s24344, 24.07.2018 в 13:34.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2018, 09:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от s24344
Ниже приведена верска с существующей проблемой в IE10
ИЕ10 видать положил на Флекс с прибором.

Альтернативный вариант.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.list {
	border: 1px solid;
	max-width: 1170px;
	margin: 0 auto;
}
.list__item {
	vertical-align: top;
	padding: 25px 18px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table class="list">
	<tr>
	<td class="list__item"><a class="list__link" href="#"><span>First</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Second</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Third</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></td>
	</tr>
</table>
</body>
</html>

Последний раз редактировалось ksa, 25.07.2018 в 09:47.
Ответить с цитированием
  #5 (permalink)  
Старый 25.07.2018, 09:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от ksa
ИЕ видать положил на Флекс с прибором.
Так и есть...
https://caniuse.com/#search=flexbox
Ответить с цитированием
  #6 (permalink)  
Старый 25.07.2018, 15:14
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2019, 17:29
Новичок на форуме
Отправить личное сообщение для i.Bes Посмотреть профиль Найти все сообщения от i.Bes
 
Регистрация: 28.02.2019
Сообщений: 1

&__item {
    padding: 25px 18px;
    flex: 1 1 auto;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Убрать display none в последнем элементе SLameN Элементы интерфейса 4 14.08.2015 18:12
Не сохраняются настройки grid Fubu_By ExtJS 1 09.07.2013 21:49
Свойство display: none для строк в таблице под IE8 vatar Internet Explorer 9 29.09.2011 14:47
коррекция кода harek13 jQuery 1 16.12.2010 17:13