html - 如何在 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如何仅通过调整 CSS 来实现通过 Chrome 在 Firefox 中显示的自动换行？

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;
}​