【发布时间】：2009-02-28 11:41:34
【问题描述】：
我注意到，当 dpi 设置为高于 96 到喜欢 120 时，我的网站在使用 Firefox 或 IE7 时会变得混乱。 CSS基本上打破了。有谁知道如何解决这个问题？
谢谢
【问题讨论】：
【发布时间】：2009-02-28 11:41:34
【问题描述】：
该站点使用固定大小的布局，但混合了 px 和 pt 单元。更改屏幕的 dpi 时，这些单位的相对大小会发生变化，即网站被设计破坏了。
你应该做什么：
- 不要将
pt用于屏幕布局 -pt仅用于打印 - 阅读液体布局和相关单位
em
【讨论】：
如果用户调整了他们的 Windows DPI 设置，没有真正的修复可以防止任何事情发生。将 Windows 更改为“大字体”模式，或将其设置为默认值以外的 DPI 设置，会影响 IE 中的所有布局。
但是，这绝不会导致网站大规模崩溃。可能由于值的四舍五入，有些东西会稍微错位。
当字体大小更改时，您所指向的站点确实会严重损坏 - 例如，更改浏览器中的默认字体（或将 Firefox 设置为“仅缩放文本”）。按钮中的文本完全离开按钮并开始悬停在其他地方。
看起来，至少对于顶部的按钮而言，造成这种情况的主要原因是整行按钮是单个背景图像，其中的文本是浮动元素，仅与背景图像相匹配给定字体大小 - 对其大小和位置进行任何调整，它们都会与背景不符。
在设计时，请始终更改缩放设置（在 IE7 和 Firefox 中）和字体大小（例如在 Firefox 中使用“仅缩放文本”），并确保那些确实改变大小的东西不会破坏网站.在某些情况下，“pt”中指定的内容会缩放，而“px”中指定的内容不会。
你如何解决它
很明显，您已将所有内容设计为以像素为单位的特定大小，包括标题和所有按钮/选项卡。如果您想这样做，请将标头 DIV 声明为 position: relative，并使用像素值（相对于包含 div）将 H1、H2 和 UL 绝对定位在其中。从 DIV 中删除边距、填充等以简化。使用像素指定 LI 元素的宽度、高度和上边距。
我会怎么做
通常，我会构建这样的东西以使其具有灵活性，因此如果出于某种原因，某人在其浏览器上启用了非常大的字体，它会很好地处理它。这对于您的背景图像来说实际上是不可能的，因为它们是专门为一个给定的尺寸构建的。所以我会在标题上有一个可重复的背景，我会分别为每个按钮做每个背景。显然，这将是更多的工作。
【讨论】：