逆天的IE7中,诡异的横向滚动条

今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心。这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊。

首先我还是介绍下,通常我们的网页里会有文章列表或帖子列表等模块,当然还有其他的一些也会涉及这些,我主要说一说大家常常出现的情况。老邹我在这里就用文章列表举例说明。文章列表往往是每一个项里有文章标题、描述、作者和时间等等。长什么样子呢?

请看下图:

逆天的IE7中,诡异的横向滚动条

上面这个是我想要的效果。

但是我出现什么问题了?大家再看下图:

逆天的IE7中,诡异的横向滚动条

看到没,在逆天的IE7模式下,居然出现横向滚动条了。让我非常不理解,我怎么得罪他了,他偏偏这么对待我。经过我和他数小时的对战,我终于知道他的弱点了。

起初我找原因。用F12调试。找了半天,没有找到到底是哪里超出了。难道有个幽灵在旁边,这不科学。

(。。。。。此处经过省略1w字。。。。。)

最后我把每个右下角的时间去了。我靠,居然正常了。原来是我的时间考的鬼,这为毛啊?我于是再次询问我又爱又恨的度娘。找到了一篇文章就是这个地址,有空大家可以去看看,没空就算了(文章地址:http://talkser.blog.163.com/blog/static/206457252201282555732752/)

大概意思是说浮动定位要给浮动元素具体的宽度,不然会有默认值去影响,去超出。

我想了想,我这里的时间没有给宽度,那就给一个吧。不错,他正常了,于是我以为浮动元素和绝对定位元素都要给宽度,不然会影响。反正是解决了。

(虽然解决了,但是还是心里不舒服)

可是我转头想了想。如果我换了一个标签会怎样,(这里和大家说明一下:我的时间通常用<i>标记表示。他默认是斜体。)于是我把 <i>标签换成了<span>标签。居然没有任何异常。看来不是浮动定位和绝对定位的原因。我想到:这两个奇葩标签都是行内标记,唯一的区别就是<i>标记的字体是斜的,那好办,我把<span>标记描述成斜体,如果有问题,那么就是这个斜体的问题。起初我就是无聊想试试,认为不可能是斜体的原因。可是,后面发生的事情,我和我的小伙伴们都惊呆了,改成斜体后,横向滚动条出来了,IE7,你的节操何在啊?

原来搞了半天是这个原因。

所以解决办法也有。有两种。

第一:如果你要保留斜体,那么就给你的标记加上一个固定高。

第二:如果不要斜体,那么就加上font-style:normal;就好了。

当然我还是用的在浮动定位里套的绝对定位。这样可以准确和简单定位。

我另外也弄了几个注释,大家可以试一试,IE7的调试真的很有意思哦。希望大家多多分享你的问题。

具体代码如下:

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .clear {
clear: both;
} .main {
width: 1100px;
margin: 20px auto;
border: 1px solid red;
padding-bottom: 10px;
} .main .block {
width: 495px;
height: 100px;
margin: 10px 0 0 30px;
padding: 5px;
background: #eee;
float: left;
position: relative;
} .main .block h3 {
margin: 8px 0 0 8px;
} .main .block h3 a {
font-family: 微软雅黑;
font-size: 16px;
text-decoration: none;
} .main .block p {
font-family: 微软雅黑;
font-size: 14px;
text-indent: 2em;
color: gray;
} .main .block span {
position: absolute;
right: 0px;
bottom: 0px;
font-family: Arial;
font-size: 12px;
color: #666;
font-style: italic; /*如果不用斜体,改成normal,也不用下面的宽度了*/
width: 100%; /*如果保留斜体,请给一个具体宽度*/
} /*.main .block i {
position: absolute;
right: 0px;
bottom: 0px;
font-family:Arial;
font-size:12px;
color:#666;
}
这里是i标记,可以和span替换的玩一玩
*/
</style>
</head>
<body>
<div class="main">
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="block">
<h3><a href="#">我是文章的标题哦</a></h3>
<p>
我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦,我是文章的描述哦...
</p>
<span>2014-4-14</span>
<!--<i>2014-4-14</i>-->
</div>
<div class="clear"></div>
</div>
</body>
</html>

为本人原创,在此发表。

如有问题可以与本人联系

邹学良  Terry Zou

QQ:1526348043

新浪微博:http://weibo.com/coolsbook

腾讯微博:http://t.qq.com/CoolsBook

更多关注请访问:http://www.coolsbook.com

原文地址:http://www.coolsbook.com/Post/p/165

上一篇:jquery 高度的获取


下一篇:git使用简易指南