1

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

这是一个链接

右侧的蓝色框在 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;
 }

谢谢你的帮助！

4

3 回答 3

2

问题与其说是跨浏览器问题，不如说是样式问题——您的推荐 div 的高度是固定的，所以如果有人的字体与您指定的不同，或者在他们的浏览器上增加字体大小，文本将溢出（就像我使用 Firebug 提升字体时所做的那样）。

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

于 2013-08-17T17:49:01.573 回答
0

这可能是与字体渲染相关的问题。每个浏览器的尺寸略有不同，因此最终的整体高度不同。我会height从#testimon.

于 2013-08-17T17:48:42.087 回答
0

我用 Crome、Opera、Maxathon、Firefox、Safari 和 IE 看​​网站，所有浏览器都是当前版本的浏览器。图像和文字看起来不错。我能看到的唯一问题是在某些浏览器中，您必须单击图像两次或三次才能放大图像。

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

于 2013-08-17T18:02:39.237 回答