Question

我遇到IE11问题并使用CSS calc（）函数以及display: inline-block和/或display: inline-table。

目前我有一个文本输入和一个应该彼此相邻的按钮（内联），按钮始终是固定宽度，输入应该占用剩余的可用空间（即calc(100% - 92px)）。这两个元素都是display: inline-table;。在所有其他浏览器中，执行此操作calc()工作正常。在IE11中，它将按钮拖放到下一行。

JSBin中包含的几个样式底部使元素显示为内联，尽管此修复不适用于最终结果。我所做的是将display:inline-block添加到输入和输入按钮，还从输入中删除了padding和border。在一天结束时，输入**必须有填充＆amp; border`所以这对我的用例不起作用。

^^ box-sizing: border-box修复了＆＃34; hack＆＃34;，但问题整体仍然存在于IE11中。

Here is the JSBin（为了查看问题，您必须使用IE11）

现在的CSS看起来像这样......

body, dd, figure, form {
    margin: 0;
}

form {
    margin-top: 1.6875rem;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

form fieldset {
    margin: 0;
    padding: 0;
    border:0;
}

input {
    border: none;
    border-radius: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

input {
    font-size: 12px;
    line-height: 15px;
    display: inline-table;
    padding: 4px 12px 5px;
    border: 1px solid #000;
    border-radius: 0;
    background-color: #fff;
    color: #999;
    font-style: italic;
    font-weight: 300;
    vertical-align: top;
    margin: 6px 0 14px;
    margin-top: 0;
    margin-bottom: 0;    
    width: calc(100% - 92px);
    height: 40px;
}

button {
    border: 0;
    height: 40px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
    display: inline-table;
    position: relative;
    padding: 0;
    background-color: #000;
    color: #fff;
    width: 92px;
}

我假设IE11和calc()存在错误，其中calc()在元素为display:inline-block时未考虑边框/填充或display:inline-table，虽然我在研究中找不到任何建议100％的建议。

最终我的问题是，如何让两个元素成为＆＃34;内联＆＃34;一个是固定像素值，另一个是跨浏览器兼容的百分比宽度。

编辑：添加了box-sizing: border-box，这使得display: inline和padding/border: 0在JSBin的底部过时了。但问题仍然存在于IE11中。

Answer 1

我的问题的答案如下......

正如亚当在上面的评论中提到的那样，至少将box-sizing: border-box;添加到输入和输入中。按钮元素修复了calc()函数中未计算边框/填充的问题。

除此之外，将display: inline-table更改为display: inline-block修复了IE11中的问题。

IE11宽度calc（）没有评估边框和＆amp;使用内联表或内联块时填充

1 个答案: