表单不在 DIV 中（适用于 IE 9，但不适用于 Chrome 或 IE11）

Question

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

总的来说，它显示得很好，但是当我尝试在 DIV 中放置表单时遇到了问题。下面是几个sn-ps代码：

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 显示我的问题。我希望深色轮廓的表格位于深红色框内。

来自“可能已经有你答案的问题”：
This OP 没有跟进他/她的问题。我尝试了this 和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>