gpt4 book ai didi

html - calc() 在 CSS 中不计算,在浏览器中存在差异

转载 作者:太空狗 更新时间:2023-10-29 15:04:50 26 4
gpt4 key购买 nike

<分区>

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com