黑马程序员技术交流社区

标题: 浏览器兼容问题 关于offsert问题 [打印本页]
作者: dongqinglove    时间: 2013-6-20 06:57
标题: 浏览器兼容问题 关于offsert问题
本帖最后由 dongqinglove 于 2013-6-26 12:28 编辑

昨天写了一个简单的html，代码如下
  1. <html>
  2. <head>
  3.     <title>xxx</title>
  4.     <script src="js/jquery-1.7.2.min.js"></script>
  5.     <style>
  6.         /*#warp {
  7.             font: 12px;
  8.         }*/
  9.         #up {
  10.             width: 700px;
  11.         }

  13.         #title1 {
  14.             background-color: #6E92D0;
  15.         }

  17.         #table1 {
  18.             height: 80px;
  19.             position: relative;
  20.             left: auto;
  21.         }

  23.         #down {
  24.             width: 700px;
  25.             height: 200px;
  26.             background-color: white;
  27.         }

  29.         .bb {
  30.             float: left;
  31.             height: 80px;
  32.             width: 116px;
  33.             font: 12px;
  34.         }

  36.         #div1, #div3, #div5 {
  37.             background-color: #E3E3E3;
  38.         }

  40.         #div2, #div4, #div6 {
  41.             /*background-color: green;*/
  42.             background-color: #E3E3E3;
  43.         }

  45.         .aa {
  46.             height: 23px;
  47.             width: 700px;
  48.             background-color: #6E92D0;
  49.         }

  51.         .xx {
  52.             width: 700px;
  53.             height: 2px;
  54.             background-color: white;
  55.         }

  57.         .cc {
  58.             height: 20px;
  59.             width: 30px;
  60.         }

  62.         #dd {
  63.             float: right;
  64.             background-color: white;
  65.             height:25px;
  66.         }

  68.         #ff {
  69.             width: 700px;
  70.             background-color: white;
  71.             font-size: 12px;
  72.             text-align: center;
  73.         }

  75.         #gg {
  76.             background-color: #6E92D0;
  77.         }

  79.         table {
  80.             font-size: 12px;
  81.             text-align: center;
  82.         }
  83.     </style>
  84.     <script>
  85.         $(function () {
  86.             $("input[type=text]").css("height", "18px");
  87.             $("input[type=text]").css("width", "100px");
  88.             //$("tbody>tr:even").css("background-color", "red");  // 为偶数行设置样式类
  89.             $("#mm tr:not(#gg):odd").css("background-color", "#E3E3E3");
  90.         });
  91.     </script>
  92. </head>
  93. <body>
  94.     <div id="warp">
  95.         <div id="up">
  96.             <div id="title1">编辑订单信息</div>
  97.             <div id="table1">
  98.                 <div id="div1" class="bb">
  99.                     <table>
  100.                         <tr>
  101.                             <td>*订单编号</td>
  102.                         </tr>
  103.                         <tr>
  104.                             <td>商  标</td>
  105.                         </tr>
  106.                         <tr>
  107.                             <td>金  额</td>
  108.                         </tr>
  109.                     </table>
  110.                 </div>
  111.                 <div id="div2" class="bb">
  112.                     <table>
  113.                         <tr>
  114.                             <td>
  115.                                 <input type="text" /></td>
  116.                         </tr>
  117.                         <tr>
  118.                             <td>
  119.                                 <input type="text" /></td>
  120.                         </tr>
  121.                         <tr>
  122.                             <td>
  123.                                 <input type="text" /></td>
  124.                         </tr>
  125.                     </table>
  126.                 </div>
  127.                 <div id="div3" class="bb">
  128.                     <table>
  129.                         <tr>
  130.                             <td>*订单日期</td>
  131.                         </tr>
  132.                         <tr>
  133.                             <td>数  量</td>
  134.                         </tr>
  135.                         <tr>
  136.                             <td>负责人</td>
  137.                         </tr>
  138.                     </table>
  139.                 </div>
  140.                 <div id="div4" class="bb">
  141.                     <table>
  142.                         <tr>
  143.                             <td>
  144.                                 <input type="text" /></td>
  145.                         </tr>
  146.                         <tr>
  147.                             <td>
  148.                                 <input type="text" /></td>
  149.                         </tr>
  150.                         <tr>
  151.                             <td>
  152.                                 <input type="text" /></td>
  153.                         </tr>
  154.                     </table>
  155.                 </div>
  156.                 <div id="div5" class="bb">
  157.                     <table>
  158.                         <tr>
  159.                             <td>*商品编号</td>
  160.                         </tr>
  161.                         <tr>
  162.                             <td>单  价</td>
  163.                         </tr>
  164.                         <tr>
  165.                             <td>负责人Email</td>
  166.                         </tr>
  167.                     </table>
  168.                 </div>
  169.                 <div id="div6" class="bb">
  170.                     <table>
  171.                         <tr>
  172.                             <td>
  173.                                 <input type="text" /></td>
  174.                         </tr>
  175.                         <tr>
  176.                             <td>
  177.                                 <input type="text" /></td>
  178.                         </tr>
  179.                         <tr>
  180.                             <td>
  181.                                 <input type="text" /></td>
  182.                         </tr>
  183.                     </table>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.         <div id="down">
  188.             <div class="aa" style="background-color: white;">
  189.                 <div id="dd">
  190.                     <input type="button" value="btn1" />
  191.                     <input type="button" value="btn1" />
  192.                     <input type="button" value="btn1" />
  193.                     <input type="button" value="btn1" />
  194.                     <input type="button" value="btn1" />
  195.                     <input type="button" value="btn1" />
  196.                 </div>
  197.             </div>
  198.             <div class="xx"></div>
  199.             <div class="aa">订单信息一览表</div>
  200.             <div class="xx"></div>
  201.             <div id="ff">

  203.                 <table id="mm" cellpadding="11" cellspacing="0" border="0" style="border-color: white" width="700px">
  204.                     <tr id="gg">
  205.                         <th>订单信息</th>
  206.                         <th>订单信息</th>
  207.                         <th>订单信息</th>
  208.                         <th>订单信息</th>
  209.                         <th>订单信息</th>
  210.                         <th>订单信息</th>
  211.                         <th>订单信息</th>
  212.                         <th>订单信息</th>
  213.                         <th>订单信息</th>
  214.                     </tr>
  215.                     <tr>
  216.                         <td>000001</td>
  217.                         <td>000001</td>
  218.                         <td>000001</td>
  219.                         <td>000001</td>
  220.                         <td>000001</td>
  221.                         <td>000001</td>
  222.                         <td>000001</td>
  223.                         <td>000001</td>
  224.                         <td>000001</td>
  225.                     </tr>
  226.                     <tr>
  227.                         <td>000001</td>
  228.                         <td>000001</td>
  229.                         <td>000001</td>
  230.                         <td>000001</td>
  231.                         <td>000001</td>
  232.                         <td>000001</td>
  233.                         <td>000001</td>
  234.                         <td>000001</td>
  235.                         <td>000001</td>
  236.                     </tr>
  237.                     <tr>
  238.                         <td>000001</td>
  239.                         <td>000001</td>
  240.                         <td>000001</td>
  241.                         <td>000001</td>
  242.                         <td>000001</td>
  243.                         <td>000001</td>
  244.                         <td>000001</td>
  245.                         <td>000001</td>
  246.                         <td>000001</td>
  247.                     </tr>
  248.                     <tr>
  249.                         <td>000001</td>
  250.                         <td>000001</td>
  251.                         <td>000001</td>
  252.                         <td>000001</td>
  253.                         <td>000001</td>
  254.                         <td>000001</td>
  255.                         <td>000001</td>
  256.                         <td>000001</td>
  257.                         <td>000001</td>
  258.                     </tr>
  259.                 </table>
  260.             </div>
  261.         </div>
  262.     </div>
  263. </body>
  264. </html>
复制代码
显示结果却有点令人失望在IE下如图：（Ie7，8，9）

但firefox确是正常显示如图:

查看了一布局发现ie的offset多了很多，firefox没有offset,怎么回事啊？？？
作者: dongqinglove    时间: 2013-6-20 07:15
求解啊 谢谢
作者: 许庭洲    时间: 2013-6-20 08:40
1. Firefox浏览器和IE浏览器这两种浏览器在对HTML的支持是有差异的;
2. 同一网页在IE上和FireFox上看起来可能长得不一样,最明显的就是以前QQ空间上的页面在FireFox上显示就有问题,甚至在IE6,IE7,IE8上长的不一样;
3. 因此WEB开发过程中的一个重要的问题就是浏览器的兼容;
4. 浏览器市场份额大战的赢家是微软公司, IE浏览器之所以能击败其他对手,其主要原因不过是所有运行着Windows操作系统的个人电脑都预装了它而已.
作者: .netNo1    时间: 2013-6-20 15:14
火狐中没有相应属性,可以这么试试 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    时间: 2013-6-20 22:07
许庭洲 发表于 2013-6-20 08:40
1. Firefox浏览器和IE浏览器这两种浏览器在对HTML的支持是有差异的;
2. 同一网页在IE上和FireFox上看起来可 ...

你说的这个我知道，但是遇到问题总是要解决的，谢谢
作者: dongqinglove    时间: 2013-6-20 22:28
.netNo1 发表于 2013-6-20 15:14
火狐中没有相应属性,可以这么试试 function getOffset(evt) { var target = evt.target; if (target.offset ...

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

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




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2