ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px
今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字。
因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了display:block;text-indent:-9999px的样式。
用jquery var _index = $(this).index(); 获取当前点击的标签对应的名字时,发现在ie8每次获取的标签所在位置都不正确,其它浏览器都正常。百思不得其解,找了很长时间问题,发现,把 text-indent:-9999px样式去掉,这个问题解决了。
结论:text-indent:-9999px 这个样式谨慎使用。
<div class="map" id="map">
<div class="city"><span style="left:20px; top:18px;" class="full"><i></i></span><em class="name">新疆</em></div>
<div class="city"><span style="left:9px; top:22px;"><i></i></span><em class="name">西藏</em></div>
<div class="city"><span style="left:13px; top:14px;"><i></i></span><em class="name">青海</em></div>
<div class="city"><span style="left:3px; top:3px;"><i></i></span><em>内蒙古</em></div>
<div class="city"><span style="left:3px; top:3px;"><i></i></span><em>宁夏</em></div>
</div>
ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px的更多相关文章
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- IE8下JQuery clone 出的select元素使用append添加option异常解决记录
遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefo ...
- ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
- ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...
- bootstrap面包屑在ie8下显示重叠,鼠标点击显示效果正常
ie8下加载后的显示 点击之后的显示 主要是li标签宽度auto引起的,可以设置li标签的最小宽度 <ol class="breadcrumb"> <li id= ...
- 使用jQuery模拟鼠标点击a标签事件
来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <t ...
- IE8下jQuery改变png图片透明度时出现的黑边问题
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
随机推荐
- 两个常用的功能,将shp数据属性转成TXT和Excel(转)
//转成txt public static void ConvertTable2Txt(ITable pTable, string pFilePath) { int pIndex = 0 ...
- WebWork2和Spring MVC Framework的比较
http://daihaixiang.blog.163.com/blog/static/3830134200711411515336/ WebWork2和Spring MVC Framework的比较 ...
- ACM/ICPC ZOJ1009-Enigma 解题代码
#include <iostream> #include <string> using namespace std; int main() { int strwide; cin ...
- SQL SERVER语句汇总
1.查询数据库中所有用户表名:用户表总数. select name from dbo.sysobjects where OBJECTPROPERTY(id,N'IsUserTable')=1 sele ...
- JavaScript高级程序设计(一):JavaScript简介
一.JavaScript实现 1.一个完整的JavaScript包含三个部分组成: 1)ECMAScript 核心 2)DOM文档对象模型 3)BOM浏览器对象模型 2.文档对象模型(DOM) 文档对 ...
- NSArray 常用的一些方法
- (NSUInteger) count; 返回数组中元素个数 - (id)objectAtIndex:(NSUInteger)index; 返回一个id类型的数组指定位置元素 - (id)lastO ...
- cordova安装中的坑
1.安装android环境直接略过! 2.安装node.js直接略过! 3.安装cordova npm install -g cordova npm uninstall cordova -g(这条是 ...
- mysql 根据某个字段将多条记录的某个字段拼接成一个字段
未合并情况 SELECT a.id, b.name AS "role" FROM sys_user a INNER JOIN sys_user_role c ON a.id=c.u ...
- 第3章 Struts2框架--2、完整的Struts2框架应用实例
1.建立一个Dynamic Web project,项目名:UserManager,把Struts2所必需的JAR复制到项目WEB-INF/lib目录下 2.修改web.xml文件,在web.xml文 ...
- GitCam一款Gif动画制作软件
本篇文章由:http://www.sollyu.com/gitcam-a-gif-animation-software/ 说明 GifCam是一款小巧.免费的录制电脑屏幕并制作成GIF动画的软件,具有 ...