Что может привести к тому, что эта кнопка и текст не будут встроены?

Question

Ситуация: 3 кнопки в строке заголовка нашего приложения. Отформатирован как:

<ul> class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
</li> 

<span> CSS имеет фоновое изображение для отображения значка (appx 20px квадрат).

Итак, у вас есть встроенные неупорядоченные элементы списка, которые являются кнопками. Каждый элемент списка имеет диапазон (значок) и сильный (ярлык кнопки).

Теперь - 2 компьютера/пользователей. Та же ОС (Mac). Тот же браузер (Chrome). Тот же сайт/URL. Один из пользователей видит их как ожидалось, т. Е. Все элементы списка встроены друг в друга, а затем содержимое в элементах списка (кнопка и метка) также является встроенной кнопкой, а затем меткой.

Другой пользователь видит содержимое в каждом элементе списка как блок (эффективно). В верхней строке отображается значок. Затем под иконкой отображается перерыв (не буквальный разрыв html, только следующая строка) и ярлык кнопки. Их левые поля выстраиваются в линию.

Я попытался воспроизвести «рабочие» элементы списка, уменьшив ширину браузера, чтобы увидеть, что кнопки «сломались» в меньшем состоянии в какой-то момент - они этого не сделали.

Отображаемое значение <li> Отображение: элемент списка (ширина автоматически унаследована). Тег <a> - это отображение: block (width auto inherited). <span> - это дисплей: встроенный блок с кодированной шириной (24 пикселя) (не ширина или унаследованная ширина). Отображается также <strong>: встроенный блок, ширина: авто (наследуется).

Что еще хуже, так это то, что пользователь, видя неправильное, сказал, что это обычный понедельник, а не вторник.

Мысли?

Answer 1

Похоже, что вы должны загрузить резервную копию в понедельник и выполнить «diff» во вторник, чтобы увидеть, что изменилось, поскольку оно работало до этого, вероятно, это не ошибка платформы, на которой она была запущена, но скорее, кто-то изменил код таким образом, чтобы один браузер смог его разрешить, а другой - нет. Человеческая ошибка - это то, почему был создан контроль версий.

Если это не работает, не забудьте проверить свои XHTML и CSS, чтобы убедиться, что синтаксис ошибки не является проблемой. Цель этих валидаторов заключается в том, чтобы убедиться, что, если действительный код будет отображаться как ожидалось, если это не так, это ошибка производителя браузера, и его следует сообщать как ошибку.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Answer 2

hai i think you initalize the class out of ul tag. so you put the class in inside ul tag. 


<ul class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
    </li> 
</ul>