个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 CSS 问题，只出现在谷歌浏览器中。设置为 overflow: hidden 的对象在水平居中的容器中时在边缘被“剪裁”，并且仅在奇怪的浏览器宽度，并且只在高分辨率显示器上。
HTML:
<html><body>
<div id="container">
<div class="sprite"> </div>
</div>
</body></html>
CSS:
#container
{
margin: 0 auto;
max-width: 800px;
-webkit-transform: translate3d(0px,0px,0px);
}
.sprite
{
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/sprite@2x.png");
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
}
现在，当我调整窗口的宽度时，在奇数窗口宽度处， Sprite 在我的视网膜显示器上被裁剪了两侧。它不会出现在标准(1 个 css 像素到 1 个显示像素)显示器上。
这种明显的渲染错误不会出现在 Safari 或 Firefox 中。这是在运行 Chrome 35 的 OS X 10.9.3 上。
编辑:它也发生在纯 CSS 圆形上，因此似乎与背景图像的使用无关。
最佳答案
我的例子过于简单，所以问题不是单独发生的。
事实证明，通过我的完整应用程序中的 SASS 混合，我将以下内容应用于包含 Sprite 的面板(编辑问题以包含它)
-webkit-transform: translate3d(0px,0px,0px);
这是为了通过可用的硬件加速(主要是 iOS)提高 CSS 性能。
删除它会略微改善这种情况，因此在调整窗口大小时似乎不太可能“剪切”形状。
然而，从 :after 元素中删除 overflow: hidden 似乎完全解决了这个问题。
值得注意的是，即使是纯 CSS 圆也会出现这种“裁剪”副作用，它与背景图像无关(感谢@Rohit)。
这似乎是一个渲染错误，而不是我做错了什么。
关于css - 溢出问题 :hidden in Chrome on a 'retina' display，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24080555/
25
4
0
除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间还有什么区别？ 是否都返回等于
我的问题 这些方法中有哪一种是专业网页设计师所偏爱的吗？ Web 浏览器在绘制网站时是否首选这些方法中的任何一种？ 这只是个人喜好吗？ 我还缺少其他技巧吗？ 注意:以上问题是关于设计多列布局 floa
我的问题 专业网页设计师是否喜欢这些方法？ 网页浏览器在绘制网站时是否首选这些方法？ 这只是个人喜好吗？ 我还缺少其他技术吗？ 注意:以上问题与设计多列布局有关 float :左； http://js
我有一些代码返回 MyTrait 类型的特征对象，这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait，这样我就可以打印对象，并将详细信息委托(delegate)
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而，似乎Display.timerExec只
就像标题所暗示的，有什么区别吗？我当时使用的是pygame.display.flip，我在互联网上看到的是，他们使用pygame.display.update而不是使用flip。哪一个更快？ 最佳答案
Sample.this.display() 和 this.display() 哪个更好？ class Sample{ void display(){ System.out.println("d
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时，我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗？ $(this).bind.('propertychange',
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线 展示 手写 我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
我想知道是否可以在列标记内渲染自定义 html，这是显示表标记的一部分。 例如，我希望我的专栏里面有一些下拉列表？ 使用纯 html，如下所示: ... Volvo Saab Me
display.newImage() 和 display.newImageRect() 有什么区别？ 哪个更好用？ 最佳答案 display.newImage() 的文档具体提到: NOTE: dis
我正在使用纯 JS 和 flexbox 为我的元素创建网格。 元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。 可悲的是，这完全破坏了 display: flex
我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
我理解 style="display: none" 隐藏一个 HTML 元素，而 style="display: block" 显示一个 block 级 HTML 元素。 我看到一些使用 style=
设置控件的样式 display: none 和 display: block 有什么区别？ 最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。 假设我只想在 this.state.display 为
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我是一名优秀的程序员,十分优秀！