calc()不会在CSS中计算,浏览器的差异

时间:2015-08-18 10:34:06

标签: html css css3 css-calc

我创建了两个表,我想根据第一个列的大小设置右边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/

2 个答案:

答案 0 :(得分:4)

为什么要尝试计算单个值? calc(30%);

calc对语法非常挑剔,特别是资源值之间的差距。 您需要添加空格

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

编辑:这似乎不是问题,而是接近宽度值 应用于单元格(因为firebug显示它),但是根据单元格内容不同,所以这显示宽度值被覆盖,因此请尝试设置其他值:

表中的

和单元格CSS定义集:

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

答案 1 :(得分:1)

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

谢谢大家,和我一起思考!