当我缩放时h4，h5展开并溢出

Question

我正在研究this website中的某些形式，它渲染得很好但是当我放大或缩小时，你可以看到h4和h5不再是灰色区域的中心，有时甚至是溢出。 ..我尝试用div包装它们但仍然...通常当我在过去遇到这些问题时，因为我将一些包装纸的尺寸设置为百分比......但我已经检查过了。有人能告诉我我在这里缺少什么吗？

Answer 1

实际上，对于像百分比值而不是像素的设置应该是首选，特别是如果你想支持浏览器缩放：

#mainContent {
    width: 100%;
}

div.catalogo-item {
    color: #506484;
    float: left;
    min-height: 600px;
    position: relative;
    width: 33.33%;
}

Answer 2

你正在做的是对 h4 和 h5 元素使用绝对定位，这完全取决于父元素的渲染像素大小结果，即为什么在文本缩放时你的布局会中断。尽量不要绝对定位，更喜欢使用text-align：center;以这些元素为中心。

除非绝对必要，否则不要使用绝对定位进行布局，依赖于绝对定位的布局是最差的，您可以预期将来的布局中断。

Answer 3

好的，我最后为每个h4编写了一个包装器，并为每个h4应用了一个背景，并隐藏了包装器的溢出。这似乎解决了所有浏览器的问题。然后我只是对齐背景，使它们看起来就像是一个穿过屏幕的长条。感谢大家的意见和帮助