1
我遇到了一个特殊的问题，我可以用一个特定的结构来解决问题，但我不完全确定为什么。窗体的UL高度是0px？
下面是情况：设计专门为iPad提供服务的网站，所以我在Windows Safari中完成了大部分开发工作（其他浏览器无关紧要）。 jQTouch通常会为每个页面创建<ul>的<li>项，因此我的表单包含所有这些项。我遇到的特定问题是当<form>标记之外有<ul>块时，它将正确显示（因为它会延伸<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（运）上面的代码将复制的问题：表格内UL没有高度，UL外面呢。
编辑：要快速显示我所看到的视觉，我参加了一个截图，指出我所看到的： 
编辑：显然，这发生在Firefox相同的方式。为了这个目的，我做了一些AJAX工作，并且更加熟悉Firefox的Firebug扩展，所以我查看了它在Firefox中的样子，并且它也发生在那里。如果未明确设置，则UL的高度为0。
你是对的，谢谢你的回答。这些解决了这个问题，但是由于我的布局是如何的（出于各种原因），我最终不得不编写一些Javascript来设置UL的高度 - 所以我不断告诉UL它的高度是多少应该是 - 这些选项都不会让UL动态调整大小，所以我必须在Javascript中自己做。谢谢！ – Mattygabe 2012-03-21 13:18:53