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