html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
CSS教程:关于文字溢出问题的研究
时间:2016-04-10
首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题;
于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7,所以没有测试),今天看到这个新帖子发现在ie下多了两个猪,至于解决的方法有很多种,发出来大家讨论下造成这种问题的原理怎么解释?
代码如下:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
在ie6,7下会多出两个猪,在ff下是正常的;
根据怿飞前面的帖子所讲,肯定是浮动造成的问题,只不过这个浮动与怿飞的浮动布局不同,所以多了一个猪;那如果用怿飞帖子中的方法也是可以解决的;
1.用添加<br />的方法
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
2.清楚浮动的方法,(这点可以说明是浮动引起的错误)
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
3.在文字外面再套用<div></div>
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
#p#副标题#e#
4.也加上浮动效果;
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <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">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
5.想想如果将外面的main中的宽度设置去掉后,会发现最后个层并未连续浮动到第三个层后面,而是另起新行排列
;
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } </style> </head> <body> <div > <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
6.将main中的宽度设定到一定数值时也可以是正常的;
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="WebJX editor, www.jb51.net" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:500px; } </style> </head> <body> <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> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
上一条:CSS教程:控制网页文件大小通过精简CSS实现
下一条:符合web标准的嵌入Flash的方法
相关文章
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
简洁的JQ实现返回顶部特效分享
JQ代码如下:script langu
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法