css - 超过96的dpi设置搞砸了我的网站

该网站使用固定大小的布局，但混合了单位px和pt。更改屏幕的dpi时，这些单位的相对大小会发生变化，即网站会被设计破坏。

你应该做什么：

如果用户调整了他们的Windows DPI设置，那么就没有一个可以阻止发生任何事情的修复程序。将Windows更改为“大字体”模式，或将其设置为默认设置以外的DPI设置，会影响IE中的所有布局。

然而，这绝不会导致网站大规模破坏。可能由于价值的四舍五入，有些事情可能会略微错位。

当您更改字体大小时，您指向的网站确实会大幅破坏 - 例如，更改浏览器中的默认字体（或将Firefox设置为“仅缩放文本”）。按钮上的文字完全离开按钮并开始在其他地方停留。

看起来这个的主要原因，至少对于顶部的按钮，整个按钮行是单个背景图像，其中的文本是浮动元素，只与背景图像匹配给定字体大小 - 对它们的大小和位置进行任何调整，它们的背景都会变得严重。

设计时，请始终更改缩放设置（在IE7和Firefox中）和字体大小（例如在Firefox中使用“仅缩放文本”）并确保那些尺寸发生变化的内容不会破坏网站。在某些情况下，“pt”中指定的内容会缩放，而“px”中指定的内容则不会。

如何解决问题

很明显，您已将所有内容设计为特定大小（以像素为单位），包括标题和所有按钮/标签。如果要这样做，请将标题DIV声明为position：relative，并使用像素值（相对于包含div）将H1，H2和UL绝对定位在其中。从DIV中删除边距，填充等以简化。使用像素指定LI元素的宽度，高度和顶部边距。

我会做什么

通常情况下，我会建立这样的东西是灵活的，所以如果由于某种原因，一个人在他们的浏览器上启用了非常大的字体，它会很好地处理它。对于您的背景图像，这实际上是不可能的，因为它们仅针对一个给定大小进行构建。所以我在标题上有一个可重复的背景，我会分别为每个按钮做每个背景。显然，这将是更多的工作。