在我的其他问题之一中，解决渲染问题的解决方案是使用该值rgba(255, 255, 255, 255)而不是transparent.我们测试使用rgba(0, 0, 0, 0)，这仍然纠正了问题，这意味着它是transparent导致错误的定义。但是，查看W3C CSS3 规范（和MDN 参考）可以transparent发现rgba(0, 0, 0, 0)并且 transparent应该是相等的：
透明的
完全透明。这个关键字可以被认为是透明黑色的简写，rgba(0,0,0,0)，它是它的计算值。
那么给了什么？为什么两个看似相同的值会产生不同的结果？我研究了 RGBA的格式，并寻找了类似的问题（无济于事）。每个提到从transparentto转换的问题/答案rgba(0,0,0,0)总是包含“应该”或“根据”字样。（例如这里）。实际差异是什么，为什么它会如此改变输出？
注意：这发生在大多数（如果不是全部）Internet Explorer 版本中。我们也知道它发生在某些版本的 Firefox 中。然而 Chrome 和 Safari 并没有显示这种行为，这让我们相信-webkit.
为了能够将此作为错误提交，我们需要使用最少的代码重现问题。所以，从我的另一个问题转移过来，这里是使用transparentvs的比较rgba(0,0,0,0)，以及当我们同时使用两者时会发生什么。
透明的
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
.spinme{
display:inline-block;
position:relative;
left:0;
top:0;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0%;
outline: 1px solid transparent;
transform:rotateZ(0deg);
animation: spin infinite 4s;
}<div class="spinme"></div>RGBA(0,0,0,0)
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
.spinme{
display:inline-block;
position:relative;
left:0;
top:0;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0%;
outline: 1px solid rgba(0,0,0,0);
transform:rotateZ(0deg);
animation: spin infinite 4s;
}<div class="spinme"></div>两个都
正如@andyb 所指出的，在单独的元素上同时使用两者时会出现奇怪的行为。你会认为只有一个会摇晃，但他们都会摇晃。如图所示：
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
.spinme{
display:inline-block;
position:relative;
left:0;
top:0;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0%;
outline: 1px solid rgba(0,0,0,0);
transform:rotateZ(0deg);
animation: spin infinite 4s;
}
.spinme:nth-of-type(2){
outline: 1px solid transparent;
}<div class="spinme"></div>
<div class="spinme"></div>对于那些无法在 Internet Explorer 中测试的人，这里是问题的动画 .gif：
这是transparent左侧，rgba中间和右侧。
正如@Abhitalks 所指出的，我误读了参考资料，但是我将在问题中留下以下内容，以表明我们已经考虑过这种可能性，或者以防某些事情被遗漏/忽视。
感谢@juan-cv 的回答，我决定尝试创建一个测试来查找transparent每个浏览器中的计算值，并得出以下结论：
$('p').text($('p').css("background-color"));p{background-color:transparent;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>如果您在 Chrome/Safari 中查看此内容，那么您很可能会看到 (comment if you don't) rgba(0,0,0,0)。但是在 IE 中，您可能transparent仍然会看到。我正在阅读MSDN参考资料，发现：
不支持透明关键字。
这解释了为什么浏览器显示不同的结果。但是，它没有在任何地方解释他们的版本transparent实际定义为什么。我查看了旧的 CSS1 和 CSS2 w3c 规范，但找不到旧的定义。是什么transparent意思？