Question

使用jQuery 1.9.1＆amp;在我的网页CSS中有以下代码：

.breakword {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
     word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
font-size: 0.9em; font-weight: normal;
}

HTML代码包含：

<td class="breakword" align="left" style="width:54%;vertical-align:middle;">
      <select name="vlist" id="vlist" class="choices">
    </select>
</td>

上面的select填充了SQL查询的结果。

恰好，从表中检索的项目之一比输入字段长。在Firefox中，它在多行显示正常。然而，在IE8中，除了1行外，我无法显示它。此外，它将覆盖它旁边的字段。

检索到的数据是：

<Row>
  <ID>15</ID>
  <vtext>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</vtext>
</Row>
<Row>
  <ID>16</ID>
  <vtext>This is a test item for the dropdown</vtext>
</Row>

在IE8中让它正常运行我错过了什么？

Answer 1

上述代码的两个问题

表格单元格，忽略宽度并展开以容纳其内容
此外，select元素会随着内容的增长而增长，除非您指定宽度，这会使元素变小，但下拉列表仍会跨越它的完整大小;

为了达到你想要的效果，要么为你的选择元素设置一个静态宽度，

<select style="width:200px"></select>

或让它与表格单元格缩放。请参见示例JSFiddle here

Answer 2

SELECT（包含无线电和复选框）元素由操作系统（不是真正的HTML）呈现，并且不完全尊重CSS，尤其是在IE8等旧版浏览器中。

jQuery - IE8选择选项不会在下拉列表中中断/换行文本

2 个答案: