逆天的IE7中，诡异的横向滚动条
今天老邹我又要吐槽IE7了，这个奇葩浏览器总是不让省心。这回遇到的问题，灰常难发现是怎么回事，不过还是让我发现原因，哈哈，只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊。
首先我还是介绍下，通常我们的网页里会有文章列表或帖子列表等模块，当然还有其他的一些也会涉及这些，我主要说一说大家常常出现的情况。老邹我在这里就用文章列表举例说明。文章列表往往是每一个项里有文章标题、描述、作者和时间等等。长什么样子呢？
请看下图：
上面这个是我想要的效果。
但是我出现什么问题了？大家再看下图：
看到没，在逆天的IE7模式下，居然出现横向滚动条了。让我非常不理解，我怎么得罪他了，他偏偏这么对待我。经过我和他数小时的对战，我终于知道他的弱点了。
起初我找原因。用F12调试。找了半天，没有找到到底是哪里超出了。难道有个幽灵在旁边，这不科学。
（。。。。。此处经过省略1w字。。。。。）
最后我把每个右下角的时间去了。我靠，居然正常了。原来是我的时间考的鬼，这为毛啊？我于是再次询问我又爱又恨的度娘。找到了一篇文章就是这个地址，有空大家可以去看看，没空就算了（文章地址：http://talkser.blog.163.com/blog/static/206457252201282555732752/）
大概意思是说浮动定位要给浮动元素具体的宽度，不然会有默认值去影响，去超出。
我想了想，我这里的时间没有给宽度，那就给一个吧。不错，他正常了，于是我以为浮动元素和绝对定位元素都要给宽度，不然会影响。反正是解决了。
（虽然解决了，但是还是心里不舒服）
可是我转头想了想。如果我换了一个标签会怎样，（这里和大家说明一下：我的时间通常用<i>标记表示。他默认是斜体。）于是我把 <i>标签换成了<span>标签。居然没有任何异常。看来不是浮动定位和绝对定位的原因。我想到：这两个奇葩标签都是行内标记，唯一的区别就是<i>标记的字体是斜的，那好办，我把<span>标记描述成斜体，如果有问题，那么就是这个斜体的问题。起初我就是无聊想试试，认为不可能是斜体的原因。可是，后面发生的事情，我和我的小伙伴们都惊呆了，改成斜体后，横向滚动条出来了，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
