表格不在 DIV 内（适用于 IE 9 但不适用于 Chrome 或 IE11）

Question

我在 CSS 中创建了一个基于网格的布局（使用 this article at j4n.co 创建于 6/2014，所以我认为 CSS 已过时，但我可能是错的。）

总的来说，它显示正常，但我运行在尝试将表单放置在 DIV 中时遇到了问题。以下是一些代码片段：

HTML：（取自 PHP，但 the problem recreates 如下）

<div class="row">
<div class="group">Group Name</div>
<div class="col-1">
    <p class="item">Item Name
        <br>
        <form enctype="multipart/form-data" action="upload.php" method="POST" class="pullup">
            <input type="hidden" name="itemID" value="' . htmlspecialchars($itemID) . '"></input>
            <input type="hidden" name="userIDnum" value="' . htmlspecialchars($userIDnum) . '"></input>
            <input type="hidden" name="groupName" value="' . htmlspecialchars($group_name) . '"></input>
            <input type="hidden" name="itemName" value="' . htmlspecialchars($item_name) . '"></input>
            <input type="file" name="uploadFile"></input>
            <br>Name:
            <input type="text" name="displayName"></input>
            <br>
            <input type="submit" name="submit" value="Submit"></input>
        </form>
        <br>
    </p>
</div>

CSS:

.grid-container {
   width: 100%;
   max-width: 1200px;}

.group {
   background-color: #FFDCDC;
   width: 16.66%;
   padding: 5px 5px 5px 5px;}

/*-- our cleafix hack -- */
.row:before, .row:after {
   content:"";
   display: table;
   clear:both;}

[class*='col-'] {
   float: left;
   min-height: 1px;
   width: 16.66%;
   /*-- our gutter -- */
   padding: 12px;
   background-color: #FFDCDC;}

.col-1 {
   width: 16.66%;}

.outline, .outline * {
   outline: 0px solid #dddddd;}

p.item {
   height: 200px;}

/*-- some extra column content styling --*/
[class*='col-'] > p {
   background-color: #FFC2C2;
   padding: 0;
   margin: 0;
   text-align: center;
   color: white;}

form.pullup {
   outline: 5px solid #000000;
   display: table-cell;}

JSFiddle 显示我的问题。我希望深色轮廓的表格位于深红色框内。

来自"Questions that may already have your answer":
This OP did not follow up on his/her question. I tried the solutions from this and this提问未成功。

从类似问题中，我没有看到任何似乎相关的内容。如果有我遗漏的可能有帮助的问题，请指点我！

谢谢！

Answer 1

我认为你的问题是<input type="file" name="uploadFile"></input>

它太大了，无法放入较小的容器中。所以表格的尺寸太大了。

编辑：

默认文件输入很难设置样式。使用 uniform 之类的东西创建适合框的文件输入。

ps：项目应该是 div 而不是 p-Tag

编辑 2：更新了 fiddle 并添加了：

input[type="file"] {
  max-width: 110px;
}

工作正常，如果您不需要上传按钮旁边的文字。否则去穿制服。

Answer 2

问题是 p 标签内不允许使用表单标签，因为 p 标签不应包含任何块元素。简单的解决方案是将 .item 标签更改为 div 并更新您的 CSS.

查看 this fork of your fiddle。

<div class="row">
<div class="group">Group Name</div>
<div class="col-1">
    <div class="item">Item Name
        <br>
        <form enctype="multipart/form-data" action="upload.php" method="POST" class="pullup">
            <input type="hidden" name="itemID" value="' . htmlspecialchars($itemID) . '"></input>
            <input type="hidden" name="userIDnum" value="' . htmlspecialchars($userIDnum) . '"></input>
            <input type="hidden" name="groupName" value="' . htmlspecialchars($group_name) . '"></input>
            <input type="hidden" name="itemName" value="' . htmlspecialchars($item_name) . '"></input>
            <input type="file" name="uploadFile"></input>
            <br>Name:
            <input type="text" name="displayName"></input>
            <br>
            <input type="submit" name="submit" value="Submit"></input>
        </form>
        <br>
    </div>
</div>
</div>

表格不在 DIV 内（适用于 IE 9 但不适用于 Chrome 或 IE11）

Form not staying within a DIV (Works in IE 9 but not Chrome or IE11)

html

css

forms

internet-explorer

google-chrome