空格正在中断div中的文本流

Question

我有一个网站。在Chrome和Internet Explorer中，有一个空格可以中断文本流。我不知道他们来自哪里。

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

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

HTML code：

<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>

定义约会产品句柄的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）之间的空格来自哪里？

Answer 1

试试这个：

.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 */
}

Answer 2

你应该用来自己解决这些错误的策略是分而治之，如下：

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

2. 以块的形式添加html元素，然后进行测试，以查看每次添加如何影响页面。

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

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

Answer 3

经过一些调整，这有效：

#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;
}

Answer 4

好吧，正如人们已经建议的那样，你的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>

屏幕截图如下：