-1

我有一个网站。在 Chrome 和 Internet Explorer 中，存在中断文本流的空白。我不知道他们从哪里来。

我需要帮助找到它们并删除它们。

您可以在此处查看完整页面：http: //printingunlimited.com/business-card-info.htm

HTML 代码：

<div id="about-product">
  <h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
  <img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/> 
</div>

定义 about-product 句柄的 CSS：

#about-product {padding: 0 0 20px 0; height: 200px;}
img.product-image {display:block; position:absolute; left:560px; top:-5px; }
#about-product h2 {float:left;}
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;}

指出问题区域的图像：

截屏

your business cards are printed( ) 和 ( )之间的空白on 14 point card stock从何而来？

4

4 回答 4

0

尝试这个：

.header-content {
  width: 860px;
  margin: 0 auto;
  height: 190px;
  position: relative; /* <~ add this line */
}

ul#drop-nav {
  display: block;
  float: none;
  margin: 0 auto;
  position: absolute; /* <~ change this line */
  top: 170px; /* <~ change this line */
}
于 2013-08-28T15:26:44.793 回答
0

您应该使用自己解决这些错误的策略是分而治之，如下所示：

  1. 删除影响该特定 HTML 元素的所有 html 属性和 CSS 样式。

  2. 分块添加 html 元素，边做边测试，看看每个添加对页面的影响。

  3. 当您发现问题出现时，将您所做的最后一批更改减半，以找出导致问题的样式。

  4. 当您找到中断文本流的 CSS 属性时，请将其删除或尝试不同的方法。

于 2013-08-28T15:38:27.690 回答
0

经过一些调整，这有效：

#about-product {
  padding: 0 0 20px 0;
  height: 180px;
}

#about-product h3 {
  display: inline-block;
  font-size: 16px;
  font-weight: normal;
  float: left;
  width: 550px;
  position: absolute;
}
于 2013-08-28T15:52:34.423 回答
0

好吧，正如人们已经建议的那样，您的 CSS 样式不适合 IE 和 chrome。首先，您必须在 W3 验证它。

接下来，我添加了一些样式来纠正它。

他们来了 ：

<div id="about-product" style="height: 175px">
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div>

屏幕截图如下：

在此处输入图像描述

于 2013-08-28T16:02:17.490 回答