您当前的位置: 首页 > 前端教程 > HTML教程 > CSS定位后无法选择容器内容的解决方案

CSS定位后无法选择容器内容的解决方案

作者:不详 来源:网络 发布时间: 2010-06-14 11:46 点击:
在IE中常常会碰到如果将容器定位后,出现容器内的文字不可选择(测试的时候主要用带连接的文字)。 xhtml结构: div ahref=#CSS定位后无法选择容器内容的解决方案/a /div css样式: div{ position:absolute; top:100px; left:100px; width:200px; height:200px; border

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>

分享到:
本文"CSS定位后无法选择容器内容的解决方案"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4