盒子定位-跨瀏覽器兼容性問題

Question

我正在工作的網站上的頁面布局有問題。

這是一個鏈接

在IE和Firefox中，右側的藍色框看起來不錯，但是在Chrome，Safari和Opera中，藍色框太短（文本太靠近框底部）。

這是盒子的代碼：

#testimon {
   background: url("../img/ttm_bg.png") repeat-x scroll 0 0 transparent;
   border-radius: 15px 15px 15px 15px;
   border-top: 4px groove #00D1FA;
   box-shadow: 0 1px 4px 1px #555555;
   font-size: 14px;
   height: 788px;
   margin-top: 26px;
   padding: 3px;
   text-align: center;
   width: 262px;
 }
#testimon h4 {
   color: rgba(255, 255, 255, 0.92);
   font-size: 19px;
   margin: 8px 0 17px 0;
   text-shadow: 1px 2px 2px #1A1A1A;
 }
#testimon p {
   font-family:Georgia, "Times New Roman", Times, serif;
   color: rgba(0, 0, 0, 0.88);
   line-height:25px;
   font-size: 14px;
   font-style: oblique;
   font-weight: bold;
   text-shadow: 0 1px 1px #CCCCCC;
 }
#testimon .quote {
   font-size:25px;
   padding:4px;
 }
#testimon .signature {
   color: #e6e6e6;
   font-style: normal;
   margin-bottom: 15px;
   text-shadow: none;
 }
#testimon .spacer2 {
   background: url("../img/stars.png") no-repeat scroll 98px 0 transparent;
   height: 13px;
   margin: 31px 0 15px 0;
   width: 262px;
 }

謝謝你的幫助！

Answer 1

問題不是跨瀏覽器問題，而是樣式問題-您在個人鑒定div上具有固定的高度，因此，如果某人使用的字體比您指定的字體不同，或者在瀏覽器中增加了字體大小，該文本將溢出（就像我使用Firebug升級字體時所做的那樣）。

解決方法是從#testimon元素中刪除height ，並確保背景垂直重復（當前不重復）。

Answer 2

這可能是與字體渲染有關的問題。 每個瀏覽器的大小略有不同，因此最終的整體高度也有所不同。 我將從#testimon刪除height值。

Answer 3

我用Crome，Opera，Maxathon，Firefox，Safari和IE瀏覽該站點，所有瀏覽器都是該瀏覽器的當前版本。 圖像和文字看起來不錯。 我能看到的唯一問題是在某些瀏覽器中，您必須單擊圖像兩次或三次才能放大圖像。

您可能想要清除瀏覽器的緩存，然后關閉然后重新打開瀏覽器。