探索设计与体验的融合
Fusion design exploration and experience
新闻动态
News
好的网络营销公司会给客户提出建设性的意见,善于对客户进行良性引导
您的位置:>> 网站首页 >> 技术文章
IE6重复文字和文字溢出

处理的方式根据实际的情况,一般注意注释不要放置于2个浮动的区块之间。

第一种:重复文字CSS中用了float属性,并且用了html注释<!-- 注释 -->

<div style="width:200px;">
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>解决方法一:在父级容器加入:display:inline;

<div style="width:200px;display:inline;">
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
解决方法二:在子级容器去掉注释

<div style="width:200px;">
 <div style="float:left;"></div>
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
解决方法三:去除父级容器宽度

<div>
 <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
 <div style="float:left;width:200px;">前前前前前</div>
 <div style="clear:both;"></div>
</div>
第二种:在ie6,7下会多出两个猪

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法一:用添加<br />的方法

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a><br />
<a href="#" style="color:#f00">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法二:清除浮动的方法

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00;clear:both">↑上面就是多出的猪两个</a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法三:在文字外面再套用<div></div>

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00"><div>↑上面就是多出的猪两个</div></a>
<a href="#" class="test">再谈猪的问题</a>
</div>解决方法四:也加上浮动效果

<style type="text/css">
.test {
display:block;
float: left;
margin-right:2px;
}
.main {
width:200px;
}
</style>
<div class="main">
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">再谈猪的问题</a>
<a href="#" class="test">两猪两猪两猪</a>
<a href="#" style="color:#f00" class="test"><div>↑上面就是多出的猪两个</div></a>
<a href="#" class="test">再谈猪的问题</a>
</div>将main中的宽度设定到一定数值时也可以是正常的

相关链接>>
您对此文有什么评论?
类型: 意见建议 内容报错
网友对此文的评论:
未有评论!