Question

我遇到了一个特定的问题，我可以使用特定的结构，但我并不完全确定原因。

情况就是这样：设计一个专门为iPad服务的网站，所以我在Windows Safari中进行了大部分开发（其他浏览器并不重要）。 jQTouch通常会为每个<ul>项创建<li>个页面，因此我的表单包含所有这些内容。我遇到的一个特殊问题是，当我在<ul>标记之外有一个<form>块时，它会正确显示（例如，它会拉伸<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在外面没有。

编辑：为了快速展示我在视觉上看到的内容，我拍了一张截图并指出了我所看到的内容： Above issue in Safari on Windows 7 (Safari 5.1.2)

编辑：显然，这在Firefox中的发生方式相同。为了这个目的，我正在做一些繁重的AJAX工作并且更熟悉Firefox的Firebug扩展，所以我检查了它在Firefox中的样子，它也出现在那里。如果没有明确设置，UL的高度为0。

Answer 1

将overflow:auto;添加到UL代码的规则列表中，或删除float:left;代码的LI规则。

添加了overflow:auto;规则的

jsFiddle example 。

Answer 2

您的root div正在使用display: -webkit-box，这是实验性Flexible Box模型的一种实现，但您的表单标记设置为display: inline-block。因此，第一个UL使用一个（新的，实验的）模型呈现，而表单以传统方法呈现UL。

使用典型的显示逻辑，浮动的孩子（你的li s）对父母的身高没有贡献，除非浮动已被“清除”。这是纠正（和预期）的行为，j08691的方法将清除那些浮动。

使用-webkit-box时，您显然不需要清除浮动。但是在form标签内你会回到传统的箱型模型中，必须这样做。

表格内的UL高度为0px？

2 个答案: