css+div常见问题整理

最新推荐文章于 2024-05-05 02:50:11 发布

linbooooo1987

最新推荐文章于 2024-05-05 02:50:11 发布

阅读量813

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： div css table filter border ie

本文链接：https://blog.youkuaiyun.com/linbooooo1987/article/details/7235200

css 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一系列CSS技巧，包括解决浏览器兼容性问题、实现文本垂直居中、div元素透明度设置等，帮助开发者应对常见布局挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.兼容IE与FF如何使连续英文长字段自动换行
css使用word-wrap: break-word,如果是table中，定义如下：
table { table-layout:fixed; }
table tr td,table tr th{ overflow:hidden; word-wrap: break-word; }

2.ff下为什么父容器的高度不能自适应
解决的办法是在div 与 p 之间插入<div style="clear:both"></div>清除掉这个p的浮动
或父元素使用overflow:hidden这个属性。

3.伪类声明顺序
a:link { color:red }
a:hover { color:blue }
a:visited { color:green }
a:active { color:orange }

4.IE6的双倍边距BUG
浮动元素margin在IE6中解释为双倍，使用 display : inline。

5.position:fixed不能兼容IE6
6.IE6的外边距3PX BUG，可使用heck解决
7. list-style-image无法准确定位的问题

8.通用垂直居中文本方法
div{ line-height:30px; height:30px }

9.一个div元素垂直居中浏览器样式
div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
    }
10.让div透明解决方法
    opacity:30;

filter:alpha(opacity=30)

11.table tr 边框 IE不显示解决方法

使用background属性替代border

12.CSS3背景渐变兼容各浏览器代码

background-image:-webkit-gradient(linear, left top, left bottom, from(#dedede), to(#f5f5f5)); /* Saf4+, Chrome */
background-image:-webkit-linear-gradient(top, #dedede 35%, #f5f5f5 140%); /* Chrome 10+, Saf5.1+ */
background-image:-moz-linear-gradient(top, #dedede 35%, #f5f5f5 140%); /* FF3.6 */
background-image:-ms-linear-gradient(top, #dedede 35%, #f5f5f5 140%); /* IE10 */
background-image:-o-linear-gradient(top, #dedede 35%, #f5f5f5 140%); /* Opera 11.10+ */
background-image:linear-gradient(top, #dedede, #f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dedede', EndColorStr='#f5f5f5'); /* IE6–IE9 */