html判断浏览器类型来定义样式

我现在遇到一个问题，大概是这样的，定义个div，然后再div里面插入一张图片和一个table，然后给table定位的时候，使用的语句是style="margin:200px 0 0 100px;position: absolute"，但是在IE和谷歌里面显示的位置不一致，所以我想能否在html文件里判断语句，判断浏览器是IE的时候，使用style="margin:200px 0 0 100px;position: absolute"，是谷歌的时候，使用style="margin:200px 0 0 300px;position: absolute"，求大拿帮忙

<script type=“text/javascript”>
      function isIE(){
          return navigator.appName.indexOf(“Microsoft Internet Explorer”)!=-1 && document.all;
      }
      function isIE6() {
          return navigator.userAgent.split(“;”)[1].toLowerCase().indexOf(“msie 6.0″)==“-1″?false:true;
      }
      function isIE7(){
          return navigator.userAgent.split(“;”)[1].toLowerCase().indexOf(“msie 7.0″)==“-1″?false:true;
      }
      function isIE8(){
          return navigator.userAgent.split(“;”)[1].toLowerCase().indexOf(“msie 8.0″)==“-1″?false:true;
      }
      function isNN(){
         return navigator.userAgent.indexOf(“Netscape”)!=-1;
      }
      function isOpera(){
          return navigator.appName.indexOf(“Opera”)!=-1;
      }
      function isFF(){
          return navigator.userAgent.indexOf(“Firefox”)!=-1;
      }
      function isChrome(){
          return navigator.userAgent.indexOf(“Chrome”) > -1;
      }
if(isChrome()){
     element.addclass("css");
}
 </script>

不同的浏览器对css和html的解析不同。有的浏览器出的比w3c规范都早，有的是有规范也不执行。ie系列的浏览器中，ie6有子级的解析规范，ie8升级了一部分内容，但是还是不够规范，ie9目前说对html和css等支持都比较好一点了~ 网页设计中，浏览器兼容的测试主要侧重： ie6（10年前的浏览器，国内全部浏览器都是和ie使用的同样的内核）， ie7（vista平台自带浏览器，解析方法怪异） chrome（较为规范，但仍有其私有属性 -webkit-*）， 火狐(较为规范，仍有其私有属性 -moz-*)， opera(较为规范，使用者相比其他浏览器较少，也有私有属性 -o-*)， safari(较为规范，用户较少，原则上讲大部分是安装在apple产品客户端)。 如果你为设计的网页在国内流通，只需要验证一下ie6 ie7 ie8就可以了。（网络无国界带来的问题是大部分网页无法自动转换语言，但是，作为网页，他应该尽量网国际标准上靠拢。） 出现兼容性的直接原因是css或html代码书写不规范。 规范的html书写需要遵循严格的标签规则，每个标签有每个标签的意义，不能随便乱用。 css中涉及一个css hack,hack是针对不同的浏览器书写不同的css的一种方法，但是，这是不规范的！使用w3c css 验证是无法通过验证的。 常见的错位原因大概有： 宽度计算错误，忽略了margin、padding、border的像素差值。 浮动错误，在float:left或者float:right后没有及时清除浮动clear:both; 行高错误,line-height在各个浏览器下都不一样，即便是一个没有内容的空标签，他也可能因为浏览器的不同而存在不同的高度。 粗心大意的属性设置，有时候，你放置的内容（图片常见，如相机拍摄的图片，300dpi，2000多的分辨率等）过大导致容器被撑开，或者文本未换行，导致容器被撑开错位。 还有其他很多怪异的现象，不过通常离不开上面提到的这几条，浮动、宽度差值、行高、换行等！ 解决办法 1.善用reset.css，通过reset.css统一各个浏览器对默认标签的解析效果。 2.内容形式分离，理解好抽屉模式。div是抽屉，里面放的才是东西（内容），不要把定位和内容混淆书写，导致内容修饰时影响的布局。 3.及时清除浮动，clear可以在浮动元素结束后清除浮动，如果你不知道是采用clear:left,还是clear:right.那就使用clerar:both一劳永逸，永远兼容。 4.没有内容的元素行高是0（line-height:0px;）.字号也是0(font-size:0px;)，溢出隐藏(overflow:hidden;)。 5.的确需要完整大小的时候使用display:block;不确定的时候使用display:inline-block;他不仅可以同修饰普通元素的宽高，还可以修饰ie浏览器中的虚框规则程度。 6.模块化构建你的页面，这是结构清晰化的一种做法，也是你在设计html的时候应该注意的，不要想起来一个内容就随手加上，这可能会导致你的页面结构涣散，代码凌乱，不利于你的阅读和维护。 7.谨慎使用定位（position），定位是一个比较好用的方法，代价是你必须对你的定位元素做好规划和设计，否则，不是出现重叠，就是出现错位，要么就是偏离。

css里面写if判断 1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>  2. <!–[if IE]> 所有的IE可识别 <![endif]–>  3. <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>  4. <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>  5. <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>  6. <!–[if IE 6]> 仅IE6可识别 <![endif]–>  7. <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>  8. <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>  9. <!–[if IE 7]> 仅IE7可识别 <![endif]–>  10. <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>  11. <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>  css table{     margin:200px 0 0 100px;position: absolute      } <!-[if IE]> table{     margin:200px 0 0 300px;position: absolute      } <![endif]->