Chrome,CSS - 缩放敏感布局

Question

建立:

我有一个带圆角的简单盒子,它有一个标题,并根据文本的数量进行扩展,如Dan Cederholm的Bullet Proof Web Design(ISBN 0-321-34693-9)中所述.

效果很好,除了放大谷歌浏览器外.然后框的右边缘消失.

它可以在IE和FireFox中正常运行.

例:

jsFiddle中的示例

在chrome中,它在缩放110%和其他缩放时也失败了.在IE或FireFox中没有问题.

问题:

1. 是什么原因引起了这个？

2. 一般来说,是什么让布局变焦敏感(如果存在任何这样的一般规则......)？

3. Dan Cederholm的书真的是防弹......？

Answer 1

你需要多久才能兼容？

我的意思是,如果你可以放弃IE7/8,你应该使用css3圆角.如果你需要支持IE8/7,那么在这种情况下你绝对应该使用优雅降级.在各地努力追求完美可能不值得花时间和精力.这只是一个当浏览器永远不会再次更新时无法实现的目标.

1)可能导致这种情况的原因

这是一个相当广泛的问题,我无法重现问题,或者真的在Chrome 20(测试版)中找到一个,所以我只会列出一些可以搞砸它的东西.

• 一般的浏览器舍入错误,浏览器不精确,没有设计精确的子像素
• 将px值与其他值混合,不同的路由会使值加起来不同.
• 流入元素的定位会受到页面上其他流入元素的影响(通常难以追踪)
• 父元素属性(父类具有溢出隐藏,固定大小,例如,我认为这可能是jsfiddle中的问题)
• 浏览器中的错误
• 以上的组合

在这种情况下,jsfiddle在页面上有一堆容器和框架(溢出设置为隐藏,固定高度/宽度,基于px)等,即使在"全屏"视图中也是如此.因此,如果您真的想确定,请在您自己的电脑上打开/测试一个html文件.

2)一般来说,是什么让布局变焦敏感(如果存在任何这样的一般规则......)？

在今天的浏览器中,这可能不是那么相关,因为缩放功能通常非常先进,甚至可以扩展基于全px的布局而没有太多问题.今天仍然使用的唯一真正的问题浏览器是IE7.IE7的缩放功能非常糟糕,因此您应该只对文本使用基于%或em的值.

唯一的"官方"相关指南可以在WCAG 2.0中找到,w3可访问性指南/技术文章:

• http://www.w3.org/TR/WCAG20-TECHS/G142.html

因此浏览器可以扩展,现代浏览器没有问题,但设计不准确,混合单元(em,%,px)也是一项不可能完成的任务.

3)Dan Cederholm的书真的是防弹......？

在我开始之前,我还没有读过这本书......我从来没有读过一本CSS书(很多其他资源),但我的第一个也是最重要的技能就是梦想它.

让我们从"什么是防弹？"开始.网页设计中的防弹意味着它可以随处工作,不会在任何地方破坏.仅这一点就可以给你一个线索.

当他写这本书时,它可能已经很好地防弹了,但网络是一个充满活力的地方,即使我把这本书的最新公告博客文章从去年12月开始.从那以后,至少有3个新的Chrome版本出现(粗略估计),甚至还有更多的Firefox版本.这一次,微软坐在他的屁股上(如果他们决定快速发布时间表我们会遇到大麻烦).

事情发生了变化,从那以后肯定引入了新的漏洞.

无论是什么打破它,没有任何东西可以防弹,只是非常非常接近你想要永远发生的事情,浏览器之间略有不同.

这并不意味着它是一本糟糕的书,看着他的简历,他绝对是网络设计的大师,所以他可能对这个领域的很多事情都是正确的.我只是希望他能解释为什么事情以某种方式完成,因为这比你学习做事更加明智.

A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!"
B: "I dunno, read somewhere I should..."
A: "Lets just use pixels! Pixels always work."
B: "Hmmm ok."

你刚刚失去了IE7的支持.(这是否是一件坏事,是另一个讨论)

Answer 2

首先,你正在使用背景图像,这是我所爱的你所提到的.

1)所以,正如你的帖子下面的评论中提到的那样,它只是舍入div的错误,它会产生背景图像.

2)我遗憾地没有消息来源,但根据我的经验,使用文本作为测量的对象是缩放敏感的,图片有时不会相对于其他所有内容缩放,以及具有预定"设置"大小的内容(例如textareas,无线电按钮,等等).

3)没有什么是防弹的,特别是对于不断变化的东西,因为网络在不同的浏览器上也表现不同.贸易危害.