CSS定位问题,标签没有
分类:多线程

<head> <style type="text/css"> a { color:red; } a:hover { color:yellow; } </style> </head> <body> <a>a</a> <a href="; </body>

大家都知道 IE6 支持 <a> 标签的 :hover,但是通常在做实际效果的时候 <a> 标签 :hover 在 IE6 下会失效,看代码:

 

CSS定位问题(2):float 和 display 的使用

2016/04/27 · CSS · display, float, 定位

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

浏览器支持:
所有主流浏览器都支持 display 属性。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持"inherit""inline-table""run-in""table""table-caption""table-cell""table-column""table-column-group""table-row"、以及 "table-row-group"属性值。

图片 1

因为对块级元素设置display:inline-block的时候可以达到与float相同的效果。就是使块级元素末尾没有换行符。那么到底什么时候使用float和什么时候使用display:inline-block呢?

大多数时候float的出现是为了处理文字环绕。所以当我们为了实现文字环绕的时候使用float而处理非文字环绕的情况下,则以使用display:inline-block为主。

如上代码,有一个 a 没有 href 标签,这种标签,在所有浏览器中鼠标均不是手势,但鼠标颜色在 IE6、IE8 中是不变的,其他浏览器要。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:hover { }
a:hover span{color:#F00;}
</style>
</head>
<body>
<a href="#">鼠标经过时改变我的<span>颜色</span></a>
</body>
</html> 

在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。

1.1float实现的导航条

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>floatNav</title> <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; /*这里主要是让父级div跟据内容自动伸长*/ float:left; } ul li { list-style:none; float:left; border-right:1px solid #d2d5d2; line-height:40px; padding: 0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style> </head> <body> <div id="body-div"> <ul> <li><a href="">首页</a></li> <li><a href="">内容1</a></li> <li><a href="">内容2</a></li> <li><a href="">内容3</a></li> <li><a href="">内容4</a></li> <li><a href="">内容5</a></li> <li><a href="">内容6</a></li> <li><a href="">内容6</a></li> </ul> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floatNav</title>
    <style type="text/css">
    body, ul{margin:0;padding:0;}
        #body-div{
            background-color:#eaebea;
            height:40px;
            /*设置当浏览器窗口变短时li换行显示*/
            overflow:hidden;
            /*这里主要是让父级div跟据内容自动伸长*/
            float:left;
        }
        ul li {
            list-style:none;
            float:left;
            border-right:1px solid #d2d5d2;
            line-height:40px;
            padding: 0 10px;
        }
        ul li a{
            text-decoration:none;
        }
        a:link, a:visited{color:#3f3b3c;}
        a:hover{color:#fd687f;}
    </style>
</head>
<body>
    <div id="body-div">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
            <li><a href="">内容6</a></li>
            <li><a href="">内容6</a></li>
        </ul>
    </div>
</body>
</html>

在chrome和firefox还有IE中,显示效果如下:
图片 2

href 标签是必填的,上述设计是不规范的,所以我们设计的时候,不要为了某种特效违反规范。

在 IE6 下“颜色”根本就不会变成红色,其他浏览器都是好的,要解决这个问题就必须触发 a:hover 的 layout,例如 a:hover { display:inline-block} 或者 a:hover { zoom:1} 等等。

就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。

1.2display:inline-block实现的导航条

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inlineNav</title> <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*这里主要是让父级div跟据内容自动伸长*/ display:inline-block; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; margin:0 auto; } ul li { list-style:none; display:inline-block; border-right:1px solid #d2d5d2; line-height:40px; padding:0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style> </head> <body> <div id="body-div"> <ul> <li><a href="" target="_blank">首页</a></li> <li><a href="">内容1</a></li> <li><a href="">内容2</a></li> <li><a href="">内容3</a></li> <li><a href="">内容4</a></li> <li><a href="">内容5</a></li> <li><a href="">内容6</a></li> <li><a href="">内容7</a></li> </ul> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inlineNav</title>
    <style type="text/css">
    body, ul{margin:0;padding:0;}
        #body-div{
            background-color:#eaebea;
            height:40px;
            /*这里主要是让父级div跟据内容自动伸长*/
            display:inline-block;
            /*设置当浏览器窗口变短时li换行显示*/
            overflow:hidden;
            margin:0 auto;
        }
        ul li {
            list-style:none;
            display:inline-block;
            border-right:1px solid #d2d5d2;
            line-height:40px;
            padding:0 10px;
        }
        ul li a{
            text-decoration:none;
        }
        a:link, a:visited{color:#3f3b3c;}
        a:hover{color:#fd687f;}
    </style>
</head>
<body>
    <div id="body-div">
        <ul>
            <li><a href="http://www.baidu.com" target="_blank">首页</a></li>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
            <li><a href="">内容6</a></li>
            <li><a href="">内容7</a></li>
        </ul>
    </div>
</body>
</html>

这段代码在chrome和firefox,IE(>=8)中的效果如下:

图片 3

在IE(<=7)的效果如下:

图片 4

因为IE(<=7)不支持display属性(开头关于display的解释)。

打赏支持我写出更多好文章,谢谢!

打赏作者

(display:inline-block 表示行内块元素,为 CSS 2.1 新增内容。千一网络编辑注)

很多人可能都已经知道了:hover在IE6及更早浏览器(以下称IE6-)下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 5 图片 6

1 赞 5 收藏 评论

有的时候为了增加一些简单的动态效果,常常会借助:hover的帮忙,比如我们时常会令鼠标经过链接时改变文字的颜色。如:

关于作者:zhiqiang21

图片 7

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

图片 8

a:hover{color:#F00;}

<a href="?">鼠标经过时改变我的颜色</a>

 

是的,这将在所有的浏览器中都有效。但如果换成这样:

a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

 

你会发现在IE6-下什么都没有发生,我们的样式失效了。对,就是这样,应该很多人都碰到过且已经解决了这个问题。

是的,只需要再添加一个a:hover{}样式就可以解决这个问题了,里面可以是zoom, padding, margin等属性。如下:

a:hover{zoom:1;}
a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

 

看着恢复了正常的效果,去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定,于是想会不会是因为haslayout。恩,很有可能就是这样。但你接着测试,会发现,不论你在a:hover{}写入任何属性,color啊,font-size啊,overflow啊(甚至是不存在的属性,如xx:yyy),都可以使之恢复正常。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    ";
<html xmlns="" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>:hover在IE6 and earlier下的问题</title>
<meta name="Description" content="IE6 and earlier下的:hover问题" />
<meta name="Keywords" content="IE6, :hover" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<style type="text/css">
#nav ul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;}
#nav li{float:left;width:100px;height:30px;line-height:30px;text-align:center;}
#nav a{color:#333;}
#nav a .en{display:none;}
#nav a:hover{display:block;background:#333;color:#CCC;}
#nav a:hover .en{display:inline;}
#nav a:hover .cn{display:none;}
</style>
</head>
<body>
<div id="nav">
<ul>
    <li><a href="#"><span class="cn">首页</span><span class="en">Homepage</span></a></li>
    <li><a href="#"><span class="cn">新闻</span><span class="en">News</span></a></li>
    <li><a href="#"><span class="cn">图片</span><span class="en">Picture</span></a></li>
    <li><a href="#"><span class="cn">下载</span><span class="en">Download</span></a></li>
    <li><a href="#"><span class="cn">留言</span><span class="en">Comment</span></a></li>
</ul>
</div>
</body>
</html>

 

 

 

例子虽然简单,但即刻你又会发现其实中英菜单和一些css tips效果也是那么的简单。

 

(原文)

本文由10bet手机官网发布于多线程,转载请注明出处:CSS定位问题,标签没有

上一篇:CSS格式化排版,只显示一部分 下一篇:网页做多宽,响应式开发中的图片处理
猜你喜欢
热门排行
精彩图文