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上传字体时那样）。

解决方法是从height元素中删除#testimon，并确保背景垂直重复（目前不重复）。

Answer 2

这可能是与字体呈现相关的问题。每个浏览器的大小略有不同，因此最终总高度不同。我会从height删除#testimon值。

Answer 3

我使用Crome，Opera，Maxathon，Firefox，Safari和I.E.查看该网站，所有浏览器都是浏览器的当前版本。图像和文字看起来很好。我能看到的唯一问题是在某些浏览器中你必须点击图像两次或三次以使图像放大。

您可能希望清除浏览器的缓存并关闭并重新打开浏览器。

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

3 个答案: