Tag Archives: IE7

程序人生

css 鼠标滑过背景变色,文字变色,a标签

制作按钮效果,滑过背景色及文字同时变色,结构是:

<li><a></a></li>

设置了

div#manage_list ul li:hover{
background:#BF2107;
}

div#manage_list ul li:active{
background:#BF2107;
}

只能变背景色,字体颜色没有变化。网搜了下,在全局中设置:

a:link {display:block; color:#000; text-decoration: none;}
a:visited {display:block; color:#000; text-decoration: none;}
a:hover {display:block; color:#FFF; text-decoration:none;}
a:active {display:block; color:#FFF; text-decoration:none;}

即给<a></a>设置display:block使其成为块元素,文字就可同时变色了。别忘了把<a></a>的宽度高度与<li></li>设置相同数值!

查了一下,暂时没发现哪篇文章说<li></li>是块元素的,但是我觉得应该是,但<a></a>不是。

 

html标签的block、inline分类明细:

  块元素(block element):

  ◎ address – 地址
◎ blockquote – 块引用
◎ center – 举中对齐块
◎ dir – 目录列表
◎ div – 常用块级容易,也是css layout的主要标签
◎ dl – 定义列表
◎ fieldset – form控制组
◎ form – 交互表单
◎ h1 – 大标题
◎ h2 – 副标题
◎ h3 – 3级标题
◎ h4 – 4级标题
◎ h5 – 5级标题
◎ h6 – 6级标题
◎ hr – 水平分隔线
◎ isindex – input prompt
◎ menu – 菜单列表
◎ noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
◎ noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
◎ ol – 排序表单
◎ p – 段落
◎ pre – 格式化文本
◎ table – 表格
◎ ul – 非排序列表

内联元素(inline element):

  ◎ a – 锚点◎ abbr – 缩写
◎ acronym – 首字
◎ b – 粗体(不推荐)
◎ bdo – bidi override
◎ big – 大字体
◎ br – 换行
◎ cite – 引用
◎ code – 计算机代码(在引用源码的时候需要)
◎ dfn – 定义字段
◎ em – 强调
◎ font – 字体设定(不推荐)
◎ i – 斜体
◎ img – 图片
◎ input – 输入框
◎ kbd – 定义键盘文本
◎ label – 表格标签
◎ q – 短引用
◎ s – 中划线(不推荐)
◎ samp – 定义范例计算机代码
◎ select – 项目选择
◎ small – 小字体文本
◎ span – 常用内联容器,定义文本内区块
◎ strike – 中划线
◎ strong – 粗体强调
◎ sub – 下标
◎ sup – 上标
◎ textarea – 多行文本输入框
◎ tt – 电传文本
◎ u – 下划线
◎ var – 定义变量

  可变元素:

  可变元素为根据上下文语境决定该元素为块元素或者内联元素。
◎ applet – java applet
◎ button – 按钮
◎ del – 删除文本
◎ iframe – inline frame
◎ ins – 插入的文本
◎ map – 图片区块(map)
◎ object – object对象
◎ script – 客户端脚本

程序人生

让网页同时兼容FireFox和IE

CSS 兼容要点:DOCTYPE 影响 CSS 处理

    FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。

    FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中。

    FireFox: 设置 padding 后, div 会增加 height 和 width, 但IE不会, 故需要用 !important 多设一个 height 和 width。

    FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFoxFF 特别设置样式。

    div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。

    cursor: pointer 可以同时在 IE FF 中显示游标手指状,hand 仅 IE 可以。

    FireFox: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。

    1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

    div{margin:30px!important;margin:28px;}

    注意这两个margin的顺序一定不能写反,据说!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

    div{maring:30px;margin:28px}

    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

    2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

    div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px}

    关于这个/**/是什么www.qpsh.com也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义:

    ul{margin:0;padding:0;}

    就能解决大部分问题。

    4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为:

    <script  type="text/javascript">

    就可以了。

    5.如果你在BOX容器里使float和text-align的方向设为一致:

    {float:left;text-align:left;margin:0 0 0 200px;}

    我们可做如下修改:

    {float:left;text-align:left;margin:0 0 0 200px;display:inline;}

程序人生

IE6 / IE7 / Firefox 的margin问题解决办法

这两天在做一个网站的布局,因为经常用firefox,所有的内容都是在firefox下面调试的,等快完工了切回IE7一看,样式差别好多,主要是在margin,padding这几个元素的理解上。
我知道ie6 ie7 firefox 对margin的解释都不同,去网上查了一下,可以通过!important这样的手段hack。
具体的做法有以下几种:
第一种:
.div {
  background:orange;/*ff*/
  *background:green !important;/*ie7*/
  *background:blue; /*ie6*/
}
第二种:
.div {
  margin:10px;/*ff*/
  *margin:15px;/*ie7*/
  _margin:15px;/*ie6*/
}
第三种:
#div { color: #333; } /* ff */
* html #div { color: #666; } /* IE6 */
*+html #div { color: #999; } /* IE7 */

现在常用了第一种,很好用,写出来与大家分享。
在给一个例子:
#pages{margin:auto; width:910px; text-align:left; }
#pages{*width:915px !important;}   /* IE7 */