div隐藏超宽字问题

silno 2011-12-24 09:15:33

这段代码只在IE不正常，ff chrome opera 遨游3显示正常.

想达到的目的：隐藏div内过长的文字，并把a连接放在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" xml:lang="zh" lang="zh">

<style type="text/css">
#aaa{
height: 100px;
width: 100px;
overflow: hidden;
white-space:nowrap;
-o-text-overflow: clip;
background:#eff8fe;
}

#aaa a{position:relative;top:65px;
}
</style>

<div id="aaa" >
<a href="dd.htm">div隐藏超宽字，不换行，不显示省略号</a>
</div>

代码运行结果：

1、如果只取消<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
结果正常显示，并沉底。

2、如果只取消position:relative;
结果：超宽字可以隐藏，但a在div顶部，不符合要求。

想知道：
1、如果不加这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
对页面运行、兼容性有没用影响？

2、如果一定要保留 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句#aaa a{position:relative;top:55px;
改修改？要把a沉到div靠近底部的位置

谢谢

...全文

198 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

chen_ya_ping 2011-12-25

打赏
举报

css3的内容。

chen_ya_ping 2011-12-25

打赏
举报

-o-text-overflow
这个IE肯定不支持

chen_ya_ping 2011-12-25

打赏
举报

-o-text-overflow

silno 2011-12-24

打赏
举报

[Quote=引用 1 楼 laidezhong 的回复:]
HTML code
<!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" xml:lang="zh" lang="zh">
……
[/Quote
请问，这是什么原因》？

laidezhong 2011-12-24

打赏
举报

<!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" xml:lang="zh" lang="zh">



<style type="text/css">

#aaa{

height: 100px;

width: 100px;

background:#eff8fe;

}



#aaa a{position:relative;top:65px;display:inline-block;height:14px;line-height:14px;overflow:hidden;font-size:12px;

}  

</style>



<div id="aaa" >

<a href="dd.htm">div隐藏超宽字，不换行，不显示省略号</a>

</div>