关于CSS细节集合(二)

一、IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确达到效果,解决办法:

.代码  

  1. #show li.s1{ border:1px solid #ff9900; background:#454242;}
  2. #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}

二、为元素设置hasLayout

很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决,最简单的给元素设置hasLayout值的方法是给加上CSS
的height或width(当然,zoom也可以用,但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;前端UI分享

四、样式优先级

1,内联样式 [1.0.0.0]

2,ID选择器 [0.1.0.0]

3,类,属性,伪类 选择器 [0.0.1.0]

4,元素标签,伪元素 选择器 [0.0.0.1]

五、一个元素垂直居中的css写法

.代码  

  1. #exm{
  2. position:absolute;
  3. left:50%;
  4. top:50%;
  5. z-index:1;
  6. width:200px;
  7. height:100px;
  8. margin-left:-100px;
  9. margin-top:-52px;
  10. }

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。前端UI分享

七、图片跟文字并排时, 要实现图片文字垂直居中:

  1. 将line-height:设置成图片的高度,或者图片父元素的高度.
  2. 再将图片的CSS设置vertical-align:middle;

八、li 元素中包含 a img 元素的时候,IE6下出现空白

解决方法 一:

使 li 浮动,并设置 img 为块级元素

解决方法 二:

设置 ul 的 font-size:0;

解决方法 三:

设置 img 的 vertical-align: bottom;

解决方法 四:

设置 img 的 margin-bottom: -5px;

九、被点击访问过的超链接样式不在具有hover和active

解决方法:改变CSS属性的排列顺序: L-V-H-A

十、FF下连续长字段不能自动换行

解决方法:

.代码  

  1. div{word-wrap:break-word;overflow:hidden;}

十一、FF下父容器高度不能自适应

解决办法:清除子元素的浮动

十二、IE下图片下方产生空隙

解决办法:

  • 定义img 为display:block,或vertical-align为top/bottom/middle/text-bottom
  • 定义父容器的字体大小为零,font-size:0

十三、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法:

  • 相邻的非浮动元素也设置浮动;
  • 浮动元素相对IE6定义_margin-right:-3px;

十四、LI内容超长后以省略号显示

解决办法: white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

十五、文本不能垂直居中

解决办法:行高和容器高度相等line-height=height;

十六、文本输入框和相邻的文本不能对齐

解决办法:设置文本输入框vertical-align:middle;前端UI分享

十七、IE设置滚动条样式

解决办法:

.代码  

  1. body{
  2. scrollbar-face-color:#f6f6f6;
  3. scrollbar-highlight-color:#fff;
  4. scrollbar-shadow-color:#eeeeee;
  5. scrollbar-3dlight-color:#eeeeee;
  6. scrollbar-arrow-color:#000;
  7. scrollbar-track-color:#fff;
  8. scrollbar-darkshadow-color:#fff;
  9. }

十八、IE6无法定义高度为1px的容器

解决办法:

.代码  

  1. div{
  2. overflow:hidden;
  3. zoom:0.8;
  4. line-height:1px;
  5. }
时间: 2024-10-08 03:16:19

关于CSS细节集合(二)的相关文章

主题:关于CSS细节集合(一)

一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: 1 <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: 1 <li>记住密码<img src="static/img/xyx.jpg" align="mi

关于CSS细节集合(一)

一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: 1 <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: 1 <li>记住密码<img src="static/img/xyx.jpg" align="mi

关于CSS细节集合(三)

一.让层显示在flash之上 解决办法:给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" /> 二.使一个层垂直居中浏览器中 解决办法:使用百分比绝对定位,与外补丁负值的方法. .代码 {position:absolute; top:50%; left:50%; margin:

Java提高篇(三六)-----java集合细节(二):asList的缺陷

在实际开发过程中我们经常使用asList讲数组转换为List,这个方法使用起来非常方便,但是asList方法存在几个缺陷: 一.避免使用基本数据类型数组转换为列表 使用8个基本类型数组转换为列表时会存在一个比较有味的缺陷.先看如下程序: public static void main(String[] args) { int[] ints = {1,2,3,4,5}; List list = Arrays.asList(ints); System.out.println("list'size:&

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

CSS标签选择器(二)

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型 标签选择器 ID选择器 类选择器 特殊选择器 1.3.CSS基本语法 二.标签选择器 2.1标签选择器概述 以文档对象类型的元素作为选择器,如p.div,span等. 最常用的

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

css控制右侧二维码浮动代码

<!--请将以下这段代码放到网页中您想要显示固定图标的位置--> <div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px