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

时间 2019-11-13

原文原文链接

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

首先我仍是介绍下，一般咱们的网页里会有文章列表或帖子列表等模块，固然还有其余的一些也会涉及这些，我主要说一说你们经常出现的状况。老邹我在这里就用文章列表举例说明。文章列表每每是每个项里有文章标题、描述、做者和时间等等。长什么样子呢？html

请看下图：浏览器

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

可是我出现什么问题了？你们再看下图：spa

看到没，在逆天的IE7模式下，竟然出现横向滚动条了。让我很是不理解，我怎么得罪他了，他恰恰这么对待我。通过我和他数小时的对战，我终于知道他的弱点了。调试

起初我找缘由。用F12调试。找了半天，没有找到究竟是哪里超出了。难道有个幽灵在旁边，这不科学。code

（。。。。。此处通过省略1w字。。。。。）orm

最后我把每一个右下角的时间去了。我靠，竟然正常了。原来是个人时间考的鬼，这为毛啊？我因而再次询问我又爱又恨的度娘。找到了一篇文章就是这个地址，有空你们能够去看看，没空就算了（文章地址：http://talkser.blog.163.com/blog/static/206457252201282555732752/）xml

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

我想了想，我这里的时间没有给宽度，那就给一个吧。不错，他正常了，因而我觉得浮动元素和绝对定位元素都要给宽度，否则会影响。反正是解决了。

（虽然解决了，可是仍是内心不舒服）

但是我转头想了想。若是我换了一个标签会怎样，（这里和你们说明一下：个人时间一般用标记表示。他默认是斜体。）因而我把 标签换成了标签。竟然没有任何异常。看来不是浮动定位和绝对定位的缘由。我想到：这两个奇葩标签都是行内标记，惟一的区别就是标记的字体是斜的，那好办，我把标记描述成斜体，若是有问题，那么就是这个斜体的问题。起初我就是无聊想试试，认为不多是斜体的缘由。但是，后面发生的事情，我和个人小伙伴们都惊呆了，改为斜体后，横向滚动条出来了，IE7，你的节操何在啊？

原来搞了半天是这个缘由。

因此解决办法也有。有两种。

第一：若是你要保留斜体，那么就给你的标记加上一个固定高。

第二：若是不要斜体，那么就加上font-style:normal;就行了。

固然我仍是用的在浮动定位里套的绝对定位。这样能够准确和简单定位。

我另外也弄了几个注释，你们能够试一试，IE7的调试真的颇有意思哦。但愿你们多多分享你的问题。

具体代码以下：

  1 <!DOCTYPE html>
  2 
  3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <meta charset="utf-8" />
  6     <title></title>
  7     <style type="text/css">
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         .clear {
 14             clear: both;
 15         }
 16 
 17         .main {
 18             width: 1100px;
 19             margin: 20px auto;
 20             border: 1px solid red;
 21             padding-bottom: 10px;
 22         }
 23 
 24             .main .block {
 25                 width: 495px;
 26                 height: 100px;
 27                 margin: 10px 0 0 30px;
 28                 padding: 5px;
 29                 background: #eee;
 30                 float: left;
 31                 position: relative;
 32             }
 33 
 34                 .main .block h3 {
 35                     margin: 8px 0 0 8px;
 36                 }
 37 
 38                     .main .block h3 a {
 39                         font-family: 微软雅黑;
 40                         font-size: 16px;
 41                         text-decoration: none;
 42                     }
 43 
 44                 .main .block p {
 45                     font-family: 微软雅黑;
 46                     font-size: 14px;
 47                     text-indent: 2em;
 48                     color: gray;
 49                 }
 50 
 51                 .main .block span {
 52                     position: absolute;
 53                     right: 0px;
 54                     bottom: 0px;
 55                     font-family: Arial;
 56                     font-size: 12px;
 57                     color: #666;
 58                     font-style: italic; /*若是不用斜体，改为normal，也不用下面的宽度了*/
 59                     width: 100%; /*若是保留斜体，请给一个具体宽度*/
 60                 }
 61 
 62         /*.main .block i {
 63                     position: absolute;
 64                     right: 0px;
 65                     bottom: 0px;
 66                     font-family:Arial;
 67                     font-size:12px;
 68                     color:#666;
 69                 }
 70             这里是i标记，能够和span替换的玩一玩
 71             */
 72     </style>
 73 </head>
 74 <body>
 75     <div class="main">
 76         <div class="block">
 77             <h3><a href="#">我是文章的标题哦</a></h3>
 78             <p>
 79                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
 80             </p>
 81             <span>2014-4-14</span>
 82             <!--<i>2014-4-14</i>-->
 83         </div>
 84         <div class="block">
 85             <h3><a href="#">我是文章的标题哦</a></h3>
 86             <p>
 87                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
 88             </p>
 89             <span>2014-4-14</span>
 90             <!--<i>2014-4-14</i>-->
 91         </div>
 92         <div class="block">
 93             <h3><a href="#">我是文章的标题哦</a></h3>
 94             <p>
 95                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
 96             </p>
 97             <span>2014-4-14</span>
 98             <!--<i>2014-4-14</i>-->
 99         </div>
100         <div class="block">
101             <h3><a href="#">我是文章的标题哦</a></h3>
102             <p>
103                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
104             </p>
105             <span>2014-4-14</span>
106             <!--<i>2014-4-14</i>-->
107         </div>
108         <div class="block">
109             <h3><a href="#">我是文章的标题哦</a></h3>
110             <p>
111                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
112             </p>
113             <span>2014-4-14</span>
114             <!--<i>2014-4-14</i>-->
115         </div>
116         <div class="block">
117             <h3><a href="#">我是文章的标题哦</a></h3>
118             <p>
119                 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦...
120             </p>
121             <span>2014-4-14</span>
122             <!--<i>2014-4-14</i>-->
123         </div>
124         <div class="clear"></div>
125     </div>
126 </body>
127 </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