Question

我的div class .product包含一个浮动内联块的图形，右边是文本。这会使一系列单元格出现在另一个之下。

我遇到了一些问题，当序列中位于其上方的数字上开始进行转换的比例转换时，页面下方的一些数字略微摇摆不定。

当天早些时候，我有一个类似的问题，直接从标题下方开始，我认为我通过清除它的两侧浮动来修复它，但问题已在其他地方重新出现，我似乎无法解决它。我已经尝试添加overflow: auto;来修复包含元素的浮点数，但无济于事。我也尝试清除浏览器缓存。

当我删除特定于webkit转换的代码行-webkit-transition: -webkit-transform .1s ease-in-out .1s;和-webkit-transition: -webkit-transform .1s ease-in-out .1s;时，连锁摆动会从Chrome中消失，尽管转换效果是即时的，而不是渐进的。我的效果发生得如此之快，它没有太大的区别，但它在IE，Safari，Opera和Firefox上看起来更加精致，它们似乎允许过渡效果而没有任何特定于浏览器的前缀，而Chrome则没有吨。在非Chrome浏览器中，当转换生效时，正在进行转换的图像似乎仍会略微移动，但序列中的图像已经停止摆动。在Chrome中关闭转换功能时，图像不会随着图像缩放而显示出晃动的迹象，尽管我猜测人眼可能太快了。

我已达到一个结果充足的状态，但我有兴趣知道是否有人可以对这些问题有所了解。

p, li, ol, ul, {font-adjustment:0.5em;}
h1, h2, h3, h4, h5 {font-family: 'umbrageregular' sans-serif;}

h1 {font-size:2em; text-align: center; }
h2 {margin:.5em .1em .1em 1em; font-size:1.4em;}
h3 {font-size:1.2em;}

footer, section {width: 970px; clear: both;}
div.leftNavBar, div.pageContent {float: left;}
div.leftNavBar {width: 400px; } 
div.pageContent {width: 570px; } 
div.product {
       display:inline-block; 
       overflow: hidden; 
       margin: .5em 0 .5em 0;
       background-color: rgba(0,0,0,.1); } 
div.product:hover {
       background-color: 
       rgba(0,0,0,.2); 
       -webkit-transition: background-color .2s ease;
       transition: background-color .2s ease; }
div.product p {margin: 0 0.6em .7em 0; }
div.product h3, h4 {margin:0.5em 1.5em .2em 0; text-align:right;}    

figure {margin: .6em .9em .6em .6em; display:inline-block; float:left;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: -webkit-transform .1s ease-in-out .1s;
        transition: transform .2s ease-in-out .2s;}

figure:hover {margin: .6em .9em .6em .6em;
       -webkit-transform: scale(1);
       transform: scale(1);
       -webkit-transition: -webkit-transform .1s ease-in-out .1s;
       transition: transform .2s ease-in-out .2s;}

图像比例转换会导致浮动图像进一步在Chrome中抖动

0 个答案: