浏览器兼容问题关于offsert问题

苏波

本帖最后由 dongqinglove 于 2013-6-26 12:28 编辑

昨天写了一个简单的html，代码如下

<html>
<head>
<title>xxx</title>
<script src="js/jquery-1.7.2.min.js"></script>
<style>
/*#warp {
font: 12px;
}*/
#up {
width: 700px;
}
#title1 {
background-color: #6E92D0;
}
#table1 {
height: 80px;
position: relative;
left: auto;
}
#down {
width: 700px;
height: 200px;
background-color: white;
}
.bb {
float: left;
height: 80px;
width: 116px;
font: 12px;
}
#div1, #div3, #div5 {
background-color: #E3E3E3;
}
#div2, #div4, #div6 {
/*background-color: green;*/
background-color: #E3E3E3;
}
.aa {
height: 23px;
width: 700px;
background-color: #6E92D0;
}
.xx {
width: 700px;
height: 2px;
background-color: white;
}
.cc {
height: 20px;
width: 30px;
}
#dd {
float: right;
background-color: white;
height:25px;
}
#ff {
width: 700px;
background-color: white;
font-size: 12px;
text-align: center;
}
#gg {
background-color: #6E92D0;
}
table {
font-size: 12px;
text-align: center;
}
</style>
<script>
$(function () {
$("input[type=text]").css("height", "18px");
$("input[type=text]").css("width", "100px");
//$("tbody>tr:even").css("background-color", "red"); // 为偶数行设置样式类
$("#mm tr:not(#gg):odd").css("background-color", "#E3E3E3");
});
</script>
</head>
<body>
<div id="warp">
<div id="up">
<div id="title1">编辑订单信息</div>
<div id="table1">
<div id="div1" class="bb">
<table>
<tr>
<td>*订单编号</td>
</tr>
<tr>
<td>商标</td>
</tr>
<tr>
<td>金额</td>
</tr>
</table>
</div>
<div id="div2" class="bb">
<table>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
</table>
</div>
<div id="div3" class="bb">
<table>
<tr>
<td>*订单日期</td>
</tr>
<tr>
<td>数量</td>
</tr>
<tr>
<td>负责人</td>
</tr>
</table>
</div>
<div id="div4" class="bb">
<table>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
</table>
</div>
<div id="div5" class="bb">
<table>
<tr>
<td>*商品编号</td>
</tr>
<tr>
<td>单价</td>
</tr>
<tr>
<td>负责人Email</td>
</tr>
</table>
</div>
<div id="div6" class="bb">
<table>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>
<input type="text" /></td>
</tr>
</table>
</div>
</div>
</div>
<div id="down">
<div class="aa" style="background-color: white;">
<div id="dd">
<input type="button" value="btn1" />
<input type="button" value="btn1" />
<input type="button" value="btn1" />
<input type="button" value="btn1" />
<input type="button" value="btn1" />
<input type="button" value="btn1" />
</div>
</div>
<div class="xx"></div>
<div class="aa">订单信息一览表</div>
<div class="xx"></div>
<div id="ff">
<table id="mm" cellpadding="11" cellspacing="0" border="0" style="border-color: white" width="700px">
<tr id="gg">
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
<th>订单信息</th>
</tr>
<tr>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
</tr>
<tr>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
</tr>
<tr>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
</tr>
<tr>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
<td>000001</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

复制代码

显示结果却有点令人失望在IE下如图：（Ie7，8，9）

但firefox确是正常显示如图:

查看了一布局发现ie的offset多了很多，firefox没有offset,怎么回事啊？？？

dongqinglove · dongqinglove

求解啊谢谢

许庭洲 · 许庭洲

1. Firefox浏览器和IE浏览器这两种浏览器在对HTML的支持是有差异的;
2. 同一网页在IE上和FireFox上看起来可能长得不一样,最明显的就是以前QQ空间上的页面在FireFox上显示就有问题,甚至在IE6,IE7,IE8上长的不一样;
3. 因此WEB开发过程中的一个重要的问题就是浏览器的兼容;
4. 浏览器市场份额大战的赢家是微软公司, IE浏览器之所以能击败其他对手,其主要原因不过是所有运行着Windows操作系统的个人电脑都预装了它而已.

.netNo1 · .netNo1

火狐中没有相应属性,可以这么试试 function getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefined) { target = target.parentNode; } var pageCoord =getPageCoord(target); var eventCoord = { x: window.pageXOffset + evt.clientX, y: window.pageYOffset + evt.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element) { coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } 程序内加上判断： if (evt.offsetX == undefined) //Firefox { var evtOffsets = getOffset(evt); n_offsetX=evtOffsets.offsetX; n_offsetY=evtOffsets.offsetY; } else { n_offsetX=evt.offsetX; n_offsetY=evt.offsetY; }

dongqinglove · dongqinglove

许庭洲发表于 2013-6-20 08:40
1. Firefox浏览器和IE浏览器这两种浏览器在对HTML的支持是有差异的;
2. 同一网页在IE上和FireFox上看起来可 ...

你说的这个我知道，但是遇到问题总是要解决的，谢谢

dongqinglove · dongqinglove

.netNo1 发表于 2013-6-20 15:14
火狐中没有相应属性,可以这么试试 function getOffset(evt) { var target = evt.target; if (target.offset ...

我把你的代码加进去，在Ie下报错了

还有能帮我解释一下offsert属性是干什么的，真的非常非常感谢

帐号		自动登录	找回密码
密码			加入黑马

浏览器兼容问题关于offsert问题

评分

5 个回复

回帖奖励 +1

评分

浏览过的版块

黑马骑士勋章

浏览器兼容问题 关于offsert问题

评分

5 个回复

回帖奖励 +1

评分

浏览过的版块

黑马骑士勋章

浏览器兼容问题关于offsert问题