首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> IE下行框高度的问题
CSS样式表
CSS:提高网页在浏览器的渲染速度
css网页制作实用技巧9则
思考Web站点设计对类以及id的命名方式
CSS教程:关于网页图片的属性
CSS教程:元素层叠级别及z-index
div css在思路和流程上实现结构与表现的分离
CSS入门教程:网页首字下沉
IE6、IE7和FF的最简单的hack技巧
跨浏览器实现float:center
css技巧:经典CSS使用技巧几则
CSS教程:legend标签设定宽度
网站进行W3C XHTML1.0验证的经验
CSS教程:网页颜色的几种表示
网页CSS背景图片使用的测试结果
CSS网页布局:网页页面结构化
SPAN和DIV,Class与ID的区别汇总
xhtml css网页制作中问题解决的方式
div css与xhtml css是什么意思?
CSS样式表优化更整洁而简短
CSS设计网站导航菜单的优势
No.
«
‹
5
6
7
8
›
»
技术文章搜索
关键字
CSS样式表 中的 IE下行框高度的问题
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2010-01-10
浏览: 47 ::
收藏到网摘: n/a
css 行级元素在多浏览器下的宽度问题 与解决方法
CSS 实现的图片宽高自适应固定边框
下面是在IE6/7下面的结果:
这里是测试代码:
<?xml version="1.0" encoding="utf-8"?> <!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> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} html{} body{line-height:1.5;text-align:center;font-size:14px;font-family:arial;} .wrap{border:solid 1px blue;margin-bottom:10px;} a{border:solid 1px red;text-decoration:none;color:#000;} p{margin-bottom:20px;} ul li{list-style:none;margin-right:20px;display:inline;} .t1{font-family:宋体;} .t2,.t4, .t6{font-family:verdana, 宋体;} .t4 ul li a,.t5 ul li a{zoom:1;} .t3,.t5{font-family:arial, 宋体;} h3{font-size:14px;font-weight:normal;color:#333;} </style> </head> <body> <div style="width:960px;margin:0 auto;text-align:left;"> <h1 >IE中英混排时的行框高度问题</h1> <p >今天发现一个奇怪的问题: 在IE下面, 中英混合与纯中文的行框高度是不一样的,这可是个比较郁闷的问题;</p> <h3 >使用font-family:宋体</h3> <div class="t1 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用</a></li> <li ><a href="">的文本</a></li> </ul> </div> <h3 >使用font-family:verdana</h3> <div class="t2 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用</a></li> <li ><a href="">的文本</a></li> </ul> </div> <h3 >使用font-family:arial</h3> <div class="t3 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用</a></li> <li ><a href="">的文本</a></li> </ul> </div> <h3 >使用font-family:verdana, 同时使"a"标签 zoom:1</h3> <div class="t4 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用</a></li> <li ><a href="">的文本</a></li> </ul> </div> <h3 >使用font-family:arial, 同时使"a"标签 zoom:1</h3> <div class="t5 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用</a></li> <li ><a href="">的文本</a></li> </ul> </div> <h3 >使用font-family:verdana, 在不含英文的"a"标签中加入&-n-b-s-p-; 并且不使用zoom:1</h3> <div class="t6 wrap"> <ul id=""> <li ><a href="">这里 Meta</a></li> <li ><a href="">测试用 </a></li> <li ><a href="">的文本 </a></li> </ul> </div> </div> </body> </html>
提示:您可以先修改部分代码再运行
看来以后要慎重使用 Verdana的字体了,虽然很喜欢它。
css 行级元素在多浏览器下的宽度问题 与解决方法
CSS 实现的图片宽高自适应固定边框
评论 (0)
All
登陆
还没注册?