IE 8线高问题

时间:2013-06-21 23:03:39

标签: css internet-explorer internet-explorer-8

我只在IE8中遇到奇怪的身高问题

http://www.jobs-apollo.com/job/details/San-Francisco-CA/EnrollmentMarketing/national-advisor-workforce-solutions-10845/

我不知道为什么,但每个段落的底部都有一个额外的换行符。有人可以请看看这个问题并帮我看看为什么会这样吗?

由于

2 个答案:

答案 0 :(得分:1)

跨度不是布置内容的好方法,尤其是当您需要在其上放置边距和填充时。

首先,span是一个“inline”元素,并且不应该在其上放置边距或填充,因为内联元素应该显示在“line”而不是块级元素上,这会导致自动关闭后换行。

http://www.impressivewebs.com/difference-block-inline-css/

如果可以,你应该修改你的html看起来像这样,因为它在语义上更正确并且不太可能在旧浏览器中中断。您可能还想考虑在

标签而不是边距上添加填充,因为我发现IE中的边距比填充更加挑剔。

                <p id="HRS_SCH_PSTDSC_DESCRLONG$0" class="PSLONGEDITBOX">Apollo Group, Inc. was founded in 1973 in response to a gradual shift in higher education demographics from a student population dominated by youth to one in which approximately half the students are adults and over 80 percent of whom work full-time. Apollo's founder, John Sperling, believed -- and events proved him right -- that lifelong employment with a single employer would be replaced by lifelong learning and employment with a variety of employers. Lifelong learning requires an institution dedicated solely to the education of working adults.</p>
                <p>Today, Apollo Group, Inc., through its subsidiaries, University of Phoenix, Apollo Global, College for Financial Planning, and Institute for Professional Development, has established itself as a leading provider of higher education programs for working adults by focusing on servicing the needs of the working adult. Apollo Group is the largest education service provider in North America and has the world's largest educational social network. Apollo is building state of art learning platforms in creating a virtual and highly engaging learning experience. The learning platforms which are built as a cloud based (Education-as-a-Service) bring a more scientific and social approach to the learning experience. We are changing the way people learn and interact via advanced, scalable learning solutions.</p>
                <strong>Subsidiary Statement</strong></p>

此外,如果您使用“b”标记为粗体,则应将其替换为“strong”,因为“b”标记已被弃用。这也可能是您问题的一部分,因为标签可能隐藏了IE正在使用的固有样式。

一旦您将代码改进为更符合标准,您可能会发现它更好用。我无法在Firefox中看到究竟是什么导致了这个问题,但我怀疑这些带有边距和br标签以及弃用的“b”标签的跨度对你的情况没有帮助。

最后也是最重要的是,您需要修复容器div中实际INSIDE的额外doctype和head标记。这肯定会导致一些问题:

enter image description here

答案 1 :(得分:0)

是的,您的问题是您使用<span>标记来划分段落。使用段落的<p>(段落)标记。这可能会解决所有问题。您可以通过在CSS中将<span>转换为display:block来解决部分问题:

span.PSLONGEDITBOX {
  display: block;
}

这将解决一些奇怪的悬挂最后一行。但我不相信它会解决所有问题。

正确的解决方法是彻底消除所有<span><br>元素。如果您正确使用<p>作为段落,<h1><h5>作为标题,则永远不需要手动插入<br>,或者至少非常少。不要将<b>标记用于标题。这不是他们的目的。

PS:这在IE9和IE10中也被打破了。