*** 实现文字伸缩显示特效

hacker 安全防御 2020-09-12 284 5 建站

一般情况下 *** 实现文字伸缩显示特效实用于网站的列表页与内容页，同时首页的公告区，以下为显示效果。

IE6的双倍间距问题，该怎么办？

引发原因：对元素使用了浮动float后，并且使用了margin-left或者margin-right，在IE6中往往会容易引发双倍间距的问题。
解决 *** ：对使用浮动float的元素多添加一个display:inline;即可，当然也可以麻烦点，使用针对IE6的hack，减少margin-left和margin-right的数值（一半）。
为什么IE6中使用PNG图片的时候，背景是灰的，而其他浏览器却是透明的？

引发原因：因为IE6对PNG-24格式的图片支持的不是很好，尤其是带alpha通道的图片。
解决 *** ：
1) 不使用带alpha通道的png-24格式的图片，而使用png-8格式的图片。
2) 对于一定要使用alpha透明的图片的话，可以用flash，也可以用其他 *** ，具体请查看gulu77整理的《IE6支持PNG透明(alpha通道)的4种 *** 》。
为什么页面很乱，下面的内容都跑到上面来了呢？

引发原因：当一个元素浮动后，就会让该元素旁边的以及下面的元素都产生位置的变化。
解决 *** ：清除该元素的浮动。
为什么高度不会自适应呢？

引发原因：当一个元素浮动以后，或者是没有设置高度的时候，往往会出现高度无法自适应的情况。
解决 *** ：如果高度没有设置或者是设置了height:auto;的话，那么可以使用overflow:hidden;来达到高度自适应的 *** 。
div中的内容被FLASH挡住了？

引发原因：FLASH在页面中的级别相对来说比其他元素都要高，就算设置了position后并且带有z-index也还是会出现这样的问题。
解决 *** ：记得以前解决这个 *** 的时候是使用iframe这个更搞级别的标签元素来解决的，不过后来发现了另外一个 *** ，就是给FLASH设置透明就可以了。可以参考《标准的FLASH插入代码》一文，这个是当初在PR的博客上看到的。
如何隐藏文字（一般用特殊的漂亮的背景图片替代）？

以下的代码只是简要说明一下如何隐藏一个文字，具体的使用 *** 大家可以根据自己需要来使用，基本上都是利用让文字超出边界然后overflow:hidden;来实现，当然是在块元素内才可以（程序代码：
这个文字我想隐藏的，怎么办
）。

A、添加标签，隐藏标签内容

B、text-indent:-9999px;利用text-indent将文字推出块区域

文字被推出去了哦

C、利用行高来隐藏文字

文字是不是又不见了啊，嘻嘻

D、利用背景色来隐藏文字

文字跟背景色相同，那就看不到了，不过好像没什么实际性的意义

E、利用其他模块来隐藏文字

这个是标题

利用margin-top负边距来将内容区域提升上去覆盖标题区域，然后用padding-top来实现原有的标题区域的范围，可以用背景图片来做得更漂亮点，但具体的要结合实际情况来实现