0

使用 jQuery 1.9.1 & 在我的网页 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 中正常运行？

4

2 回答 2

1

上面代码的两个问题

  1. 表格单元格，忽略宽度并扩展以适应其内容
  2. 此外，select元素会随着它们的内容而增长，除非你指定一个宽度，这会使元素变小，但下拉列表仍然会跨越它的完整大小；

为了实现您想要的，请为您的选择元素设置静态宽度，

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

或者让它与它的表格单元格一起缩放。在此处查看示例JSFiddle

于 2013-07-24T20:12:42.350 回答
0

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

于 2013-07-24T20:07:00.307 回答