我遇到了一个特定问题，我能够通过特定结构将其归零，但我不完全确定原因。
情况是这样的:设计一个专门为 iPad 服务的网站，所以我在 Windows Safari 中进行大部分开发(其他浏览器无关紧要)。 jQTouch 一般创建 <ul> 的页面与<li>每个元素，所以我的表格包含所有这些。我遇到的特殊问题是当我有一个 <ul> block 在 <form> 之外标签，它会正确显示(例如，它会拉伸(stretch) <ul> 以匹配其内容所占的高度)。一种简单的视觉检查方法是查看 <ul> 的背景颜色.但是，每当我将它放入 form 时标记，<ul>无法再判断其内容的高度，Safari 将其分配给 height: 0px (在第一种情况下，它分配了一个根据其内容的高度计算的像素数量，== 正确)
试图在示例中仅提取重要的 HTML 标签和 CSS 样式 - 复制 Safari 应用于每个标签的复合 CSS 以准确显示我的应用程序在所有类等中生成的内容，并故意模糊使用示例的选择器:
CSS:
div {
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-user-select: none;
background-color: #DADFE3;
background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 1px, #D4DADF 1px, #D4DADF 7px);
bottom: auto;
display: -webkit-box;
font-family: 'Helvetica Neue', Helvetica;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
overflow-x: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
right: auto;
top: 0px;
width: 1406px;
z-index: 10;
}
form {
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
bottom: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica;
height: 671px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
top: auto;
width: 1406px;
}
ul {
-webkit-box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
background-color: maroon;
border-bottom-color: #CACFD6;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #CACFD6;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #CACFD6;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #CACFD6;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-style: solid;
border-top-width: 1px;
bottom: auto;
box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
color: gray;
display: block;
font-family: 'Helvetica Neue', Helvetica;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: bold;
left: auto;
line-height: normal;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-shadow: white 0px 1px 0px;
top: auto;
width: 1335px;
clear: both;
}
li {
width: 40%;
float: left;
display: inline-block;
height: 30px;
}
HTML:
<html>
<head>
<title>Test</title>
<style type="text/css">
/* CSS above here */
</style>
</head>
<body>
<div>
<form action="/some/action" method="GET">
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</form>
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</div>
</body>
</html>
如果需要，我可以尝试提供更多信息 - 但将上述代码放在 Safari (Win) 中会重现问题:表单内部的 UL 没有高度，表单外部的 UL 有。
编辑:为了快速显示我在视觉上看到的内容，我截取了一张屏幕截图并指出了我所看到的内容:
编辑:显然这在 Firefox 中的发生方式相同。正在做一些繁重的 AJAX 工作，并且为此目的更熟悉 Firefox 的 Firebug 扩展，所以我检查了它在 Firefox 中的样子，它也出现在那里。如果未明确设置，则 UL 的高度为 0。
最佳答案
添加overflow:auto;给你规则列表UL标记，或删除 float:left; LI 的规则标签。
jsFiddle example 的 overflow:auto;添加了规则。
关于html - 表单内的 UL 高度是 0px？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9738740/