加载中…一道面試題
(2011-03-23 10:44:37)
标签：
面试题定宽兼容截断ie6列表it |
分类： CSS |
剛在一個 博客 上看到这样一道面试题目：
要求实现上面的效果，新闻文字多了可以定宽截断，少了的话 时间 会跟着左移。
原博客里面用的是绝对定位来显示时间，用定宽ul来实现截断。
而我的思路是这样的，定义一个<a>包含文字，用max-width+overflow来实现截断，结果FF/IE7/IE8与预期的效果一致，如图：
但IE6不兼容：
<a>的宽度不能auto,变成定宽，但是我又写了IE6兼容，有点奇怪，以下是我的代码：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{ max-width:240px; width:auto!important; width:240px; height:18px; overflow:hidden; display:inline-block;}
</style>
</head>
<body>
<ul>
<li><a href="#">阿飛大法師</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法法斯蒂芬斯蒂芬斯蒂法法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
</ul>
</body>
</html>
那些样式我就不去一一定义，只是实现核心的要求而已。
要求实现上面的效果，新闻文字多了可以定宽截断，少了的话 时间 会跟着左移。
原博客里面用的是绝对定位来显示时间，用定宽ul来实现截断。
但IE6不兼容：
<a>的宽度不能auto,变成定宽，但是我又写了IE6兼容，有点奇怪，以下是我的代码：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{ max-width:240px; width:auto!important; width:240px; height:18px; overflow:hidden; display:inline-block;}
</style>
</head>
<body>
<ul>
<li><a href="#">阿飛大法師</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法法斯蒂芬斯蒂芬斯蒂法法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
<li><a href="#">阿飛大法師大法斯蒂芬斯蒂芬斯蒂法</a><span>2010.12.1</span></li>
</ul>
</body>
</html>
那些样式我就不去一一定义，只是实现核心的要求而已。
喜欢
0
赠金笔
前一篇：CSS3玻璃质感按纽