Что вызывает вертикальное смещение внутри элемента списка в Firefox и IE, но не в Chrome? - PullRequest
Новая
       78

Что вызывает вертикальное смещение внутри элемента списка в Firefox и IE, но не в Chrome?

0 голосов
/ 08 ноября 2019

Эта разметка является урезанной версией реальной разметки в сложном приложении. Я не могу легко изменить это. Я абстрагировал его и сократил до минимума, необходимого для устранения проблемы.

Если вы посмотрите эту корзину в Chrome и Firefox, разница будет очевидна. Если вы включите комментарий display: block в правиле a > span, вы увидите, что он отвечает за смещение. Я не могу понять, почему или как это исправить в уязвимых браузерах.

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

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

a {
    display: flex;
}
0 голосов
/ 08 ноября 2019

Я предлагаю вам внести следующие изменения в класс a> span , чтобы решить эту проблему для браузера Firefox и IE. 

a > span {
/*  display: block is needed for truncation  */
display:inline-block;
width:250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Рабочий пример: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
div {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.428571429;
  color: #4d4e4c;
/* word-break is inhertied */
 word-break: break-all;
  width: 300px;
  outline: 1px dashed #ccc;

}

ul {

}

li {
  outline: 1px solid lightgrey;
}

a {
 
}

a > span {
/*  display: block is needed for truncation  */
display:inline-block;
width:250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

</style>
</head>
<body>
<div>
    <ul>
      <li>
        <a href="#">
          <span>
            <span>Item 1</span>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <span>Item 2</span>
          </span>
        </a>
      </li>
      <li>
         <a href="#">
          <span>
            <span>Item 3 is long and requires truncation</span>
          </span>
        </a>
      </li>
    </ul>
</div>

</body>
</html>

Вывод в различных браузерах:

enter image description here

...