CSS Transition为啥会在Firefox与IE中无效

Posted 2023-03-14

是因为CSS Transition在ie和firefox中的兼容性不好造成的。
说明如下：
在W3C官方的标准里，通过transform属性使对象旋转的写法如下： transform: rotate(40deg); /* 其中40是旋转的角度 */ 可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率： -o-transform: rotate(40deg); /* Opera浏览器 */ -webkit-transform: rotate(40deg); /* Webkit内核浏览器 */ -moz-transform: rotate(40deg); /* Firefox浏览器 */ 由于目前所有版本的IE都不兼容CSS3，所以我们只能通过IE的CSS滤镜来实现，写法如下：
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\',
M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,
M22=0.7660444431189779)"; 参考技术A 在火狐下不是样式没加上 是因为你给a加浮动了 c的样式的位置和a显示在同一个区域了 你可以这样 #a, #b, #c border: 1px solid red; width: 100px; height: 100px; #a float: left; #b float: right; a b c本回答被提问者和网友采纳 参考技术B 　　尊敬的用户，您好！很高兴为您答疑。
　　该css属性需要采用hack的语法方式进行适配。
　　希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。

为啥 Chrome 会在 Firefox 显示一条线的地方画两条线？

【中文标题】为啥 Chrome 会在 Firefox 显示一条线的地方画两条线？

【英文标题】：Why does Chrome draw two lines where Firefox displays one?为什么 Chrome 会在 Firefox 显示一条线的地方画两条线？

【发布时间】：2018-06-22 16:20:50

【问题描述】：

我正在尝试制作一个响应式正方形网格，看起来类似于方格纸。我使用了一个预先准备好的解决方案，我试图将其用于我的目的。我的 HTML 代码如下所示（4*4 方格的示例网格）：

.square 
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;


.content 
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;


.table 
  display: table;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;


.table-cell 
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>

网格在 Firefox 中正常。但是当我在 Chrome 中查看它时，它在第二行和第三行之间（以及第二和第三列之间）显示两行而不是一行。我试图将 .square 背景色设置为黑色。它部分工作，但有问题的线看起来比其他线更粗。有面糊解决方案吗？

【问题讨论】：

请添加可运行代码sn-p。这将增加人们检查您的代码的机会。

似乎“瘦”在 Chrome 中表示 0.5px，但在 Firefox/Edge 中表示 1px。此外，您将宽度设置为25%，但容器（在这种情况下）不均分（在 sn-p 中它是605px 宽）。这会产生长度为151.25px 的正方形，这会导致在与实际像素对齐时出现舍入问题。也许试着把它放在你的容器上：background-image: linear-gradient(to bottom, transparent 99%, black 99%), linear-gradient(to right, transparent 99%, black 99%); background-size: 25%;

@c69 它现在就在那里（不感谢我）。很抱歉没有把它放在第一位。我对网站不是很熟悉。

@Niet the Dark Absol 你能澄清一下吗？我试过 .square float:left;位置：相对；背景图像：线性渐变（到底部，透明 99%，黑色 99%）；背景图像：线性渐变（向右，透明 99%，黑色 99%）；背景大小：25%； 而且没有网格。

Similar issue 在 Chrome 中由舍入值引起

【参考方案1】：

如果您从 .square 中删除 position: relative 并将高度添加到 .content 是否可以解决您的问题？

【参考方案2】：

我猜你的问题是，你有display:table，因此你的桌子上有双边框。您可以在 .table 类中使用 border-collapse:collapse 解决此问题。

这是一个有效的小提琴，没​​有更多的粗线条，没有 chrome 中的双边框：https://jsfiddle.net/Hoargarth/kh7fyegk/

编辑：我忘了提一下，我还在小提琴内部将border: thin solid black; 更改为border: 1px solid black;，以删除chrome 中的粗线。

【讨论】：

你可以再次检查小提琴，因为我不小心在保存之前发布了小提琴，在我更改删除 Chrome 中的粗线之后。--编辑：现在我看到你提到的偶数/奇数数字。看起来像是 chrome 的渲染问题。

是的，这个解决方案没问题。谢谢一百万！

【参考方案3】：

在table 类中添加border-collapse: collapse;

       .square     
        float:left;
        position: relative;
        width: 25%;
        padding-bottom : 25%;
        margin:0%;
        overflow:hidden;    
    
    .content 
        position:absolute;
        height:100%; 
        width:100%;
        padding: 0%;
    
    .table
        display:table;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border-collapse: collapse;
    
    .table-cell
        display:table-cell;
        vertical-align:middle;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border: thin solid black;
    

 <div id="grid">
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
</div>


 

【参考方案4】：

对此没有适当的解决方案。似乎 Chrome 在 display: table 上舍入了宽度，但在 display: block 上却没有。标记的微小变化会产生一致的结果：

.square 
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;


.content 
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;


.table 
  /* removed display table */
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;


.table-cell 
  /* removed display table-cell */
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;
  /* added */
  box-sizing: border-box;

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>