asp.net - 关闭 html 表单导致列文本移动到 IE 中的下一行

Question

我正在使用 VPASP 作为购物车，最近我注意到 IE 中的奇怪行为。我有按包装和按箱出售的产品。所以我让每个项目都有 2 个“订购”按钮。每个产品的工作方式是在 ASP 代码中设置表单的开头，然后运行一个 html 模板，在该模板中我创建了订购按钮和订购数量的空间。然后我必须发出</form>命令，以便我可以启动该案例的表格。这段代码工作得很好，问题不在于功能......问题是视觉上的。它的设置方式，我在项目的图片下有 4 列。第一列是那个项目的“特征”，第二列是“选项”，第三列是Pack Order按钮，第四列是Case Order按钮。问题是，</form>在 Pack Order 按钮之后的命令，第四列被踢到下一行。如果我删除该</form>命令，第四列将准确定位在它应该在的位置，但是购物车不再工作。

当然 Firefox 会忽略这一点代码并完美显示，但是当我转到 IE 时……失败了。您可以通过访问该网站页面的链接来查看示例。如果您在 Firefox 中访问该站点，那将是完美的，但也可以在 IE 中查看，您会看到我遇到的视觉问题。是否有一些技巧可以让 IE 在发出</form>命令后不将列推送到下一行？

这是我用来完成这项工作的代码示例（为了便于阅读，用一点伪代码缩短了一点）：

<table border="0" cellpadding="4" cellspacing="1" width="100%" align="center">
<tr>
<td class="al vt">
<form name="prodname" action="shopaddtocart.asp" method="post">
<input type="hidden" name="productid" value="10" />
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td width="100%" align="left">
<strong>Product Title</strong>
    <table width="100%" border="0" cellspacing="2" cellpadding="2">
    <tr>
    <td width="100%" valign="top">
    <img src="product_image.jpg" border="0" alt="Image"><br />
        <div style="width: 100%; left: 0%; clear: both; float: left; overflow: hidden; position: relative;">
            <div style="right: 20%; float: left; width: 100%; position: relative;">
                <div style="right: 20%; float: left; width: 100%; position: relative;">
                    <div style="right: 30%; float: left; width: 100%; position: relative;">
                        <div class="column1">
                            Product Options
                        </div>
                        <div class="column2">
                            Product Features
                        </div>
                        <div class="column3">
                            <input class="txtfield" type="text" maxlength="4" size="3" value="1" name="quantity" />
                            <input class="submitbtn" type="submit" value=" Order " name="Order" />
                            </form> <!-- IF I REMOVE THIS THEN IE DISPLAYS CORRECTLY BUT CART STOPS WORKING -->
                        </div>
                        <div class="column4">
                            <form name="casename" action="shopaddtocart.asp" method="post">
                            <input type="hidden" name="productid" value="23">
                            <input class="txtfield" type="text" maxlength="4" size="3" value="1" name="quantity" />
                            <input class="submitbtn" type="submit" value=" Order " name="Order" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form></td></tr>

Answer 1

多一点研究。问题似乎源于嵌套表单的方式。

见这里： http ://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element

4.10.3 表单元素

内容模型：

流式内容，但没有表单元素后代。

如果您将上面的 html 粘贴到 jsfiddle 并点击 TidyUp，您会发现很多标签格式不正确。见这里：http: //jsfiddle.net/Bppj9/

如果您可以尝试这样的事情，它可能会有所帮助：

http://jsfiddle.net/methuselah/rCtGd/

您应该关注的主要部分是清理列周围的包装代码：

#content-1 {
    float: left;
    width: 20%;
    background: #bfb;
}
#content-2 {
    float: right;
    width: 80%;
}
#content-2-1 {
    float: left;
    width: 55%;
    background: #ddf;
}

此外，这些资源可以帮助您了解如何正确设置更多流体列：

• http://css-tricks.com/the-perfect-fluid-width-layout/
• http://www.vanseodesign.com/css/fluid-layout-code/

我试图清理您的 HTML，以便标签也以正确的顺序关闭，但老实说，它处于一个非常粗糙的位置，值得使用上面的资源重新处理它。

<table border="0" cellpadding="4" cellspacing="1" width="100%" align="center">
    <tr>
        <td class="al vt">
            <form name="prodname" action="shopaddtocart.asp" method="post">
            <input type="hidden" name="productid" value="10" />
            <table width="100%" border="0" cellspacing="4" cellpadding="0">
                <tr>
                    <td width="100%" align="left">
                        <strong>Product Title</strong>
                        <table width="100%" border="0" cellspacing="2" cellpadding="2">
                            <tr>
                                <td width="100%" valign="top">
                                    <img src="product_image.jpg" border="0" alt="Image">
                                    <br />
                                    <div style="width: 100%; left: 0%; clear: both; float: left; overflow: hidden; position: relative;">
                                        <div style="right: 20%; float: left; width: 100%; position: relative;">
                                            <div style="right: 20%; float: left; width: 100%; position: relative;">
                                                <div style="right: 30%; float: left; width: 100%; position: relative;">
                                                    <div class="column1">
                                                        Product Options</div>
                                                    <div class="column2">
                                                        Product Features</div>
                                                    <div class="column3">
                                                        <input class="txtfield" type="text" maxlength="4" size="3" value="1" name="quantity" />
                                                        <input class="submitbtn" type="submit" value=" Order " name="Order" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            </form>
            <div class="column4">
                <form name="casename" action="shopaddtocart.asp" method="post">
                <input type="hidden" name="productid" value="23">
                <input class="txtfield" type="text" maxlength="4" size="3" value="1" name="quantity" />
                <input class="submitbtn" type="submit" value=" Order " name="Order" />
                </form>
            </div>
        </td>
    </tr>
</table>