Как мне обернуть этот элемент списка в Firefox 11?

Question

У меня есть HTML как:

<fieldset>
  <div>
    <ul>
      <li class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.  </li>
    </ul>
  </div>
</fieldset>​

и Css как

fieldset
{
  max-width : 1em;
  width: 1em;
  border:1px solid #000000;
}
li
{
  max-width:inherit;
  width:inherit;
  word-wrap:break-word;
}​

Как это выглядит в Chrome (желаемый результат):

Как это выглядит в Firefox (проблемный результат):

JsFiddle Demo Как я могу добиться переноса слов, отображаемого через Chrome в Firefox, просто настроив CSS?

Answer 1

Это работает для меня.

fieldset
{
  max-width : 1em;
  width: 1em;
  border:1px solid #000000;
}
li
{
  max-width:1em;
  width:1em;
  word-wrap:break-word;
}​

Либо не используйте наследование для li, либо наследуйте как для родительского div, так и для ul

fieldset
{
  max-width : 1em;
  width: 1em;
  border:1px solid #000000;
}

fieldset > div{
width:inherit;
}
fieldset > div > ul{
width:inherit;
}

li
{
  max-width:inherit;
  width:inherit;
  word-wrap:break-word;
}​

Answer 2

Вы также должны указать ширину для li, так как в FF она не принимает ширину наследования 1em. Если вы укажете width:1em; в li CSS, вы получите желаемый результат в FF. Возможно, если вы не хотите делать каждый размер такого размера, сделайте его классом.

См обновленный JS Fiddle