html - 盒子定位——跨浏览器兼容性问题

Question

我正在处理的网站的页面布局有问题。

这是一个 link

右侧的蓝色框在 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，并确保背景垂直重复(目前没有)。