calc() 不计算 CSS，浏览器差异

Question

我创建了两个表，我想根据第一个表的大小设置右侧 3 列的 width。我试过 calc((100% - 200px)/3) 但它并不适用于所有浏览器：Firefox 40 失败，IE11 失败，而 Chrome 44 似乎做对了。我该怎么做才能让所有浏览器都理解 calc()？还是我应该忘记它？

我创建了一个更简单的版本，但同样失败了。

<table class="tableauTable">
<thead>
    <tr class="tableauRow first">
        <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</thead>
<tfoot>
    <tr class="tableauRow first">
        <th colspan="3" header="" class="tableauCell first"></th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</tfoot>
</table>

与calc()相同：

<table class="tableauTable">
<thead>
    <tr class="tableauRow first">
        <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</thead>
<tfoot>
    <tr class="tableauRow first">
        <th colspan="3" header="" class="tableauCell first"></th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</tfoot>

CSS:

    .tableauTable {
        width:100%;
        border-spacing: 1px;
    }
    .tableauRow.first .tableauCell {
        background: #d2d2d2 none repeat scroll 0 0 !important;
        text-align: center;
    }
    .tableauCell.first {
        width: 150px;
    }
    .tableauCell.col3 {
        width: 30%;
    }
    .tableauCell.col3x {
        width: calc(30%);
    }
    .tableauCell.first {
        background: #d2d2d2 none repeat scroll 0 0 !important;
        text-align: center;
    }
    .tableauCell {
        background: #eee none repeat scroll 0 0;
        border: 2px solid white;
        color: black;
    }

见http://jsfiddle.net/sjefb/19vrf52o/

Answer 1

为什么要计算单个值？ calc(30%);

calc 对语法非常挑剔，尤其是资源值之间的差距。 您需要添加空格 :

width: calc((100% - 200px) / 3);
                 ^^^^    ^^^^^

编辑：这似乎不是问题，而是将宽度值 应用于单元格 的方法（因为 firebug 显示它是），但是取决于单元格内容而不同，所以这表明宽度值被覆盖，所以尝试设置一些其他值：

在 table 和单元格 CSS 定义中设置：

box-sizing: border-box;
margin:0;

Answer 2

我使用 table-layout: fixed 解决了我的问题，为了固定列大小，我使用了 colgroup 和 col 标签。现在 calc() 似乎表现良好，也就是说：最左边的列具有固定宽度，所有其他列的大小相同。

谢谢大家和我一起思考！

calc() 不计算 CSS，浏览器差异

calc() doesn't calc in CSS, differences in browsers

html

css

css-calc