calc() 在 CSS 中不计算,浏览器中的差异 [重复]

Posted

技术标签:

【中文标题】calc() 在 CSS 中不计算,浏览器中的差异 [重复]【英文标题】:calc() doesn't calc in CSS, differences in browsers [duplicate] 【发布时间】:2015-11-11 05:55:16 【问题描述】:

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

【问题讨论】:

似乎不是浏览器兼容性问题though 您能否更具体地了解“失败”的含义?它没有按照您的预期布局?布局被忽略?浏览器崩溃了?根据caniuse.com/#feat=calc 的说法,可能是不同浏览器处理亚像素的方式引起的。 你打开小提琴了吗?您会看到,当 col3 宽度设置为 30% 时,所有浏览器都正常运行,而当宽度设置为 calc(30%) 时,似乎只有 Chrome 可以工作。 @D.Bugger 我已经为你更新了我的答案。这有帮助吗? 【参考方案1】:

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

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

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

编辑:这似乎不是问题,而是将宽度值 is 应用于单元格(因为萤火虫显示它是),但根据单元格内容而有所不同,所以这个显示宽度值被覆盖,所以尝试设置一些其他值:

在表格和单元格CSS定义集:

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

【讨论】:

谢谢,但这不相关:减号周围有空格,斜线不需要它们。正如我所说,我提出了一个更简单的版本,带有一个微不足道的 calc 表达式,即使这样也会出错。 @D.Bugger Firebug 显示正在应用您的宽度值 (30%),但也许您应该尝试将 min-width 设置为 30%。因为宽度值可以被层次结构中的其他元素覆盖 我将尝试使用 table-layout: fixed 是的。使用table-layout:fixed时,“表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置”。因此,在您的用例中,您必须使用固定布局(除了上面 Martin 所说的)。您还需要考虑2px 边框和1px 边框间距。总体而言,它将产生11px 的差异。然后,它工作得很好:jsfiddle.net/abhitalks/19vrf52o/6(检查开发工具)【参考方案2】:

我使用 table-layout: fixed 解决了我的问题,并且为了固定列大小,我使用了 colgroup 和 col 标签。现在 calc() 似乎表现出来了,也就是说:最左边的列有一个固定的宽度,而所有其他列的大小都是一样的。

感谢大家和我一起思考!

【讨论】:

很高兴你把它整理好了。

以上是关于calc() 在 CSS 中不计算,浏览器中的差异 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS calc 在 Safari 和回退中不起作用

CSS3 calc(100%-88px) 在 Chrome 中不起作用 [重复]

width:calc()在Firefox中不起作用

IE11 中的 css 计算错误

CSS3之calc

css3中的calc()