逆天的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
逆天的IE7中，诡异的横向滚动条的更多相关文章
- 逆天的IE7中，绝对定位元素之间的遮盖问题
个人比较支持IE9以上的版本,认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和 ...
- IE6下出现横向滚动条问题的解决方案
当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出 ...
- android 横向滚动条
/*** * 横向滚动条,修改版,从左向右滚动,支持html代码和html里面的网络图片 */public class MarqueeView extends LinearLayout { priva ...
- DataGrid横向滚动条无法拖动的问题
项目中经常遇到一些问题,这些问题可能很简单,但是之前从未遇到,可能经过了一番谷歌,也可能是查阅了MSDN,或是借鉴了大牛博客,逐渐有了些眉目,为了将这些东西落地,也为了将来之不易的东西记录下来,以备今 ...
- 发掘ListBox的潜力（一）：自动调整横向滚动条宽度
<自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整 ...
- VB ListBox 添加横向滚动条
Private Declare Function SendMessage Lib "user32 " Alias "SendMessageA" (ByVal h ...
- table左边固定-底部横向滚动条
是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- 1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x
1.横向滚动条. div.1 > div.2 > img img img 第一: 设置 div.1 一个固定的宽度 和高度 . 例如宽度 700px; 高度是 120px; 设置 o ...
随机推荐
- COJ 0578 4019二分图判定
4019二分图判定 难度级别: B: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 给定一个具有n个顶点(顶点编号为0,1,… ...
- [ 转]国内有时抽风，无法更新adt的解决方案
http://www.xidige.com/other/354 最近无意中发现mirrors.neusoft.edu.cn有android的目录,进去还能看到xml文件,所以网络搜索了一下,发现还有另 ...
- 【索引】gtest学习笔记
下载gtest 链接:http://www.cnblogs.com/duxiuxing/p/4270804.html gtest官方文档浅析 链接:http://www.cnblogs.com/dux ...
- ip地址中的网络号，主机号
当前使用的IP地址有4个字节(32bit)组成,即IPV4编码方式.每个IP地址包括两部分:网络号和主机号.当分配给主机号的二进制位越多,则能标识的主机数就越多,相应地能标识的网络数就越少,反之同理. ...
- E - Minimum Cost - POJ 2516（最小费）
题目大意:N个客户,M个供货商,K种商品,现在知道每个客户对每种商品的需求量,也知道每个供货商每种商品的持有量,和供货商把一种商品运送到每个客户的单位花费.现在想知道如果能满足所有客户的最小花费是多少 ...
- WPF自定义数字输入框控件
要求:只能输入数字和小数点,可以设置最大值,最小值,小数点前长度,小数点后长度(支持绑定设置): 代码如下: using System; using System.Collections.Generi ...
- Hibernate 关于load和get方法区别
load和个体方法都可以充分利用内部缓存和二级缓存中的现有数据. ******************************************************************* ...
- JAVA-1-学习历程1：基础知识1
前言:此文属于个人学习中总结记录的较重要的知识点,分享一下.望对刚開始学习的人有点用. 视频04 语句.函数.数组 1.函数的重载 2.数组内存空间的划分 栈.堆 视频05 数组 1. ...
- CSDN挑战编程——《数学问题》
数学问题 题目详情: 给你两个长度为n的正整数序列分别为{a1,a2,a3...an},{b1,b2,b3...bn},0<ai,bi<=100: 设S=max{x1*a1+x2*a2+x ...
- unicode下各种类型转换，CString，string，char*，int，char[]
把最近用到的各种unicode下类型转换总结了一下,今后遇到其他的再补充: 1.string转CString string a=”abc”; CString str=CString(a.c_str() ...