0

我正在使用第三方工具 [jotForm] 在我的 wordpress 网站上创建表单，我注意到在 Firfox 中，所有文本框都在容器内，而在 chrome 和 IE 中它们正在执行。我在文本框上应用了 100% 的宽度，以便它们可以在任何分辨率下进行调整。

这是不同浏览器的截图 在此处输入图像描述

这是您可以看到表单http://aite.com.sa/about/的 URL

另外，我为我的表单注入了自定义 css

.form-textarea, .form-textbox {
    padding: 4px 0;
    border: solid 1px #AAA;
    outline: 0;
    font-size:12px !important;
    font-family: Verdana, Tahoma, sans-serif;
    background: #fff;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    width:100% !important;
    }
.form-textarea {
    height: 40px;
    line-height: 100%;
    font-family: verdana !important;
    }
input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    }
.form-all{
    float:left;
    padding-top: 0px !important;
    width:100% !important;
    }
.form-input { width: 100%  !important; }
.form-line-error {background:none repeat scroll 0 0;}
.form-error-message { display: none !important; }
.form-label-left {
    display:none;
    }
.form-validation-error {border: 1px solid #C85959 !important;}
.form-button-error { color: #C85959;}
4

3 回答 3

1

由于您标记了 CSS3，请查看 box-sizing： http: //www.paulirish.com/2012/box-sizing-border-box-ftw/

默认情况下，元素的总宽度包括：

  • 给定宽度（在您的情况下为容器的 100%）
  • 边框（如果你的边框是1px，总共加2px）
  • 填充

例如：

div {
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

这个 div 将比容器宽 12px。将 box-sizing 添加到 CSS：

div {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

如果你提供 box-sizing:border-box，元素宽度的计算方式会有所不同，并且会包含 padding 和边框。第二个 div 的总宽度为 100%。

这是一个工作示例：http: //jsfiddle.net/7gW3R/

于 2013-08-04T07:30:51.400 回答
1

从列表项中删除填充并将其添加到列表中，因为它添加到 100% 宽度

.form-line {
    /* padding: 10px; remove this*/
}

.form-section, .form-section-closed {
    padding: 10px
}
于 2013-08-04T07:15:08.093 回答
0

问题在于您的标记中的几个级别。

输入是 .form-input 宽度的 100% 您的 .form-input 是 li.form-line 宽度的 100% 您的 .form-line 比表单宽

检查这个李

<li class="form-line form-line-error" id="id_3">
</li>

还有款式

.form-line {
    clear: both;
    padding: 10px;
    margin: 0px;
    display: block;
    width: 97%;
    width: -moz-available;
    position: relative;
}

边距、边框和填充宽度通常会添加到您定义的宽度，因此 width: 97% 会添加到每边 10 像素的填充。你的里太宽了，它的孩子正在填满它。

阅读盒子模型。有一个名为“box-sizing”的属性，您可以使用它在较新的浏览器上快速修复，但从长远来看，正确理解 box 模型将避免令人头疼的问题。

这是 W3C 的官方盒子模型页面

这是 Chris Coyier 更易读的版本

于 2013-08-04T07:26:41.273 回答