CSS定位后无法选择容器内容的解决方案
在IE中常常会碰到如果将容器定位后,出现容器内的文字不可选择(测试的时候主要用带连接的文字)。
xhtml结构:
<div>
<ahref="#">CSS定位后无法选择容器内容的解决方案</a>
</div>
css样式:
div{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1pxsolidred
}
HTML代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="author"content="Linxz"/>
<styletype="text/css">
div{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1pxsolidred
}
</style>
<title>CSS定位后无法选择容器内容的解决方案</title>
</head>
<body>
<div>
<ahref="#">CSS定位后无法选择容器内容的解决方案</a>
</div>
</body>
</html>
请在IE中测试上面的代码,你会发现文字是无法选择的。
当时我想到的方法是在<ahref="#">定位后无法选择容器的内容解决方案</a>后面加上一个空格来引发这个选择,不过这样的话就多了一个字符,不是很好。
问题的解决方法是
上面的问题在IE6、7中存在,解决问题的办法是让IE进入到quirksmode。关于quirksmode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题,加了背景色依然无效。接着测试中。。。
但根据在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题,加了背景色依然无效。但我在IE6绿色版中测试后可行,IE7中也可以,如果哪位朋友是用这个版本的IE6的可以试一下
HTML代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="author"content="Linxz"/>
<styletype="text/css">
div{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1pxsolidred;
background:#FFFFFF;
}
</style>
<title>CSS定位后无法选择容器内容的解决方案</title>
</head>
<body>
<div>
<ahref="#">CSS定位后无法选择容器内容的解决方案</a>
</div>
</body>
</html>
至于让使用IE的怪异模式的话,测试过,可行,但这样的话,就是对盒模型计算方式就不一样了,如果不习惯用怪异模式的朋友要考虑一下。
下面介绍是老外的方法:
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
来解决问题。后来测试,只要保留height:100%就可以了。
HTML代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="author"content="Linxz"/>
<styletype="text/css">
html,body{height:100%;}
div{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
border:1pxsolidred;
}
</style>
<title>CSS定位后无法选择容器内容的解决方案</title>
</head>
<body>
<div>
<ahref="#">CSS定位后无法选择容器内容的解决方案</a>
</div>
</body>
</html>