html - CSS3 calc() 仅在某些时候有效

Question

我有calc()几次使用 CSS3 的这个 html 页面。除了最后两个之外，它们都可以工作。这有效：

<table style="width:100%;height:calc(50% - 25px);" cellpadding="0px" cellspacing="0px">

但这不起作用：

<td style="width:calc(75% - 60px);height:100%;" bgcolor="#FF0000">

但是，如果我从中删除“ - 60px”，那么它就可以了。

这是我的完整代码：

<style>
body{margin:0px;}
.button1{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;}
.button2{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;}
.input1-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:0px 0px 10px 0px #BFBFBF inset;padding-left:10px;outline:none;}
.input1-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.input1-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;border-top-left-radius:10px;border-bottom-left-radius:10px;box-shadow:0px 0px 10px 0px #3F3F3F inset;padding-left:10px;outline:none;}
.input1-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
.button1-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;box-shadow:0px 0px 10px 0px #BFBFBF inset;outline:none;}
.button1-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.button1-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;box-shadow:0px 0px 10px 0px #3F3F3F inset;outline:none;}
.button1-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
.button2-white{background-image:linear-gradient(#F6F8F9 0%,#E5EBEE 49%,#D7DEE3 51%,#F5F7F9 100%);border-style:none;border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:0px 0px 10px 0px #BFBFBF inset;outline:none;}
.button2-white:hover{box-shadow:0px 0px 10px 0px #00BFFF inset;}
.button2-black{background-image:linear-gradient(#AEBCBF 0%,#6E7774 49%,#0A0E0A 51%,#0A0809 100%);border-style:none;border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:0px 0px 10px 0px #3F3F3F inset;outline:none;}
.button2-black:hover{box-shadow:0px 0px 10px 0px #FFBF00 inset;}
</style>
<table style="width:100%;height:10px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:90%;height:100%;transition-duration:1s;" id="td1">
<input class="button1" style="width:100%;height:100%;" type="button" onclick="if(td1.style.width=='90%'){td1.style.width='10%';td2.style.width='90%';input1.className='input1-black';button1.className='button1-black';button2.className='button2-black';}else{td1.style.width='90%';td2.style.width='10%';input1.className='input1-white';button1.className='button1-white';button2.className='button2-white';}"/>
</td>
<td style="width:10%;height:100%;transition-duration:1s;" id="td2">
<input class="button2" style="width:100%;height:100%;" type="button" onclick="if(td1.style.width=='90%'){td1.style.width='10%';td2.style.width='90%';input1.className='input1-black';button1.className='button1-black';button2.className='button2-black';}else{td1.style.width='90%';td2.style.width='10%';input1.className='input1-white';button1.className='button1-white';button2.className='button2-white';}"/>
</td>
</tr>
</table>
<table style="width:100%;height:calc(50% - 25px);" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:100%;height:100%;">
</td>
</tr>
</table>
<table style="width:100%;height:30px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:25%;height:100%;">
</td>
<td style="width:calc(50% - 60px);height:100%;">
<input class="input1-white" id="input1" style="width:100%;height:100%;" type="text"/>
</td>
<td style="width:30px;height:100%;">
<input class="button1-white" id="button1" style="width:100%;height:100%;" type="button"/>
</td>
<td style="width:30px;height:100%;">
<input class="button2-white" id="button2" style="width:100%;height:100%;" type="button"/>
</td>
<td style="width:25%;height:100%;">
</td>
</tr>
</table>
<table style="width:100%;height:100px;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:calc(75% - 60px);height:100%;" bgcolor="#FF0000">
<!-- DOESN'T WORK !-->
x
</td>
<td style="width:100px;height:100%;" bgcolor="#00FF00">
y
</td>
<td style="width:calc(25% - 40px);height:100%;" bgcolor="#0000FF">
<!-- DOESN'T WORK, I THINK !-->
z
</td>
</tr>
</table>