當我變焦時h4，h5膨脹和溢出

Question

我在this website中的某些形式上工作，它呈現得非常好，但是當我放大或縮小一點時，可以看到h4和h5不再居中在灰色區域，有時甚至溢出...我試圖用div封裝它們，但仍然...通常，當我在過去遇到過這類問題時，是因爲我將一些包裝的大小設置爲百分比......但我已經檢查過那。有人能告訴我我在這裏錯過了什麼嗎？

Answer 1

OK我最終爲每個h4編寫了一個包裝器，並向它們中的每一個應用背景，並且隱藏了溢出到包裝器。這似乎解決了所有瀏覽器上的問題。然後，我將背景對齊，使它們看起來像是穿過屏幕的一條長條。謝謝大家的意見和幫助

Answer 2

其實對於這樣的百分比值而不是像素設置應者優先，特別是如果你想支持瀏覽器縮放：

#mainContent { 
    width: 100%; 
} 

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

Answer 3

你在做什麼有使用絕對定位爲H4和是h5元素，這完全依賴於父元素的渲染像素尺寸結果，這就是爲什麼當文本縮放時您的佈局會中斷。儘量不要絕對定位，並喜歡使用文本對齊：中心;以這些元素爲中心。

絕對不要絕對定位佈局，除非絕對必要，依靠絕對定位佈局是最糟糕的，您可以預期未來的佈局中斷。