`

IE和Chrome样式兼容性问题

 
阅读更多

      今天在调节样式过程中遇到一个浏览器兼容问题,同样的html代码在chrome下显示正常,ie下面显示不正常代码如下:

<div class="nav">
 <ul>
 <c:url var="url" value="/index.do" />
 <li><a href="${url}">首页</a></li>
 <c:url var="url" value="/IndexNewsInfo.do?uuid=de424ca9-1ce1-4f55-ac29-6e7a2d944477&mod_code=1003011000" />
 <li><a href="${url}">中心概况</a></li>
 <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003001000&par_code=1003000000" />
 <li><a href="${url}">工作动态</a></li>
 <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003002000&par_code=1003000000" />
 <li><a href="${url}">通知公告</a></li>
 <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003003000&par_code=1003000000" />
 <li><a href="${url}">执法行动</a></li>
 <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003005000&par_code=1003000000" />
        <li><a href="${url}">工作风采</a></li>
        <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003006000&par_code=1003000000" />
        <li><a href="${url}">举报投诉</a></li>
        <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003007000&par_code=1003000000" />
        <li><a href="${url}">政策法规</a></li>
        <c:url var="url" value="/IndexNewsInfo.do?method=list&mod_code=1003008000&par_code=1003000000" />
        <li id="cur" ><a href="${url}">典型案例</a></li>
  </ul></div>

 

效果如图:



 

后经过同事指点添加如下样式在li上面即可

style="*margin-top: 13px;_margin-top: 13px;margin-top: 13px\0;"

以前自己没用过留作备用,有同样问题的朋友可以试试。

查询了资料这里总结一下:

margin-top: 13px; /* 所有浏览器都支持 */
margin-top: 13px !important; /* Firefox、IE7支持 */
_margin-top: 13px; /* IE6支持 */
*margin-top: 13px; /* IE6、IE7支持 */
+margin-top: 13px; /* IE7支持 */
margin-top: 13px\9; /* IE6、IE7、IE8、IE9支持 */
margin-top: 13px\0; /* IE8、IE9支持 */

 

 

 

  • 大小: 14.7 KB
分享到:
评论

相关推荐

    解决IE6、IE7、IE8样式不兼容问题

    本文将深入探讨如何解决IE6、IE7、IE8下的样式兼容性问题,包括但不限于CSS hack技术、布局调整策略以及脚本修复方案。 #### 二、CSS Hack技术 **1. Conditional Comments与X-UA-Compatible** 为了区分不同的IE...

    JavaScript 瀑布流 吸顶 兼容IE FF Chrome

    对于兼容性问题,JavaScript通常配合CSS3使用,因为CSS3提供了许多强大的布局功能,如Flexbox和Grid,但在老版本的IE浏览器(特别是IE8及以下)中,这些新特性可能不被支持。为了实现对这些浏览器的兼容,我们可以...

    IE7.JS解决IE兼容性问题方法

    在压缩包中的IE8.js可能是对IE8的一个类似补丁,因为尽管IE8相对于6和7版本已经有了很多改进,但仍存在一些兼容性问题。使用这个文件可能可以进一步提升IE8的兼容性。 总的来说,IE7.js是解决老版本IE浏览器兼容性...

    IE6、_IE7、IE8、Firefox兼容性问题

    在网页开发中,兼容性问题是一个常见且棘手的问题,尤其是涉及到老版本的Internet Explorer(IE6、IE7、IE8)和Firefox等其他浏览器。这些浏览器对于CSS(层叠样式表)的解析方式存在差异,导致在不同浏览器中页面...

    JS中出现的兼容性问题的总结.pdf

    在编写代码时,合理使用条件判断语句和兼容性函数,可以有效地解决大部分兼容性问题。同时,现代前端框架如jQuery等,已经对这些问题做了封装,可以简化开发过程。然而,对于一些特殊的场景,还是需要开发者手动处理...

    css下拉菜单示例,兼容ie678,ff,chrome

    - **Firefox和Chrome**:这些现代浏览器通常对CSS3的支持较好,但仍需注意一些细节,如`box-sizing`、`border-radius`和`opacity`等的兼容性问题。 4. **盒模型和边距**:IE6默认使用`border-box`盒模型,而其他...

    IE滚动条 CSS样式

    在早期版本的IE(如IE6、IE7)中,由于浏览器的兼容性问题,自定义滚动条样式并不完全支持,而从IE8开始,引入了`-ms-scrollbar`伪元素来允许一定程度的样式调整。然而,这些样式仅限于颜色、宽度和边框,不能像现代...

    关于IE6的兼容性问题

    ### 关于IE6的兼容性问题 ...这些特殊的语法可以在IE特定版本下生效,帮助解决样式兼容性问题。 #### 五、元数据兼容性控制 为了控制IE浏览器的渲染模式,可以通过设置`&lt;meta&gt;`标签来实现: ```html ...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    本文将深入探讨如何使CSS样式兼容IE6、IE7、IE8、IE9以及Firefox、Chrome等现代浏览器。 1. **DOCTYPE声明的影响**: DOCTYPE声明对于浏览器的渲染模式至关重要。在HTML文档的顶部加入正确的DOCTYPE,如`&lt;!DOCTYPE...

    div+css常见兼容性问题

    在网页设计中,`div+css`是一种常见的布局方式,但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他...

    IE和火狐图片兼容

    此外,随着IE浏览器市场份额的逐渐减少,现在更多的是关注Chrome、Firefox、Safari和Edge等现代浏览器的兼容性问题。 综上所述,解决“IE和火狐图片兼容”问题需要深入理解不同浏览器对PNG格式的支持情况,并灵活...

    为ie和chrome单独设置样式的方法

    在网页开发过程中,由于各个浏览器对CSS样式的解析和实现存在差异,因此为了实现良好的跨浏览器兼容性,我们需要为...通过这些方法,我们可以有效地解决浏览器之间的兼容性问题,确保网页在不同浏览器中的表现一致。

    JS的兼容性问题

    浏览器兼容性问题指的是同一个网页在不同浏览器中因为浏览器对于某些标准和技术的不同解释和支持程度而出现的显示不一致的现象。这些问题可能表现在多个方面: - **版式错误**:如文字和图片的定位不准确,页面元素...

    兼容ie,firfox,chrome的页面广告随机飘动效果

    此外,考虑到兼容性问题,我们需要确保代码能在旧版的Internet Explorer(至少到IE9)上运行。这可能需要引入jQuery的兼容性模式,或者使用某些特定的polyfill库来弥补老版本浏览器不支持的特性。同时,使用条件注释...

    浏览器兼容性问题

    Firefox、Chrome、Safari和Opera等浏览器的崛起,虽然在很大程度上促进了浏览器对标准的遵守,但也导致了不同浏览器间存在的差异,使得网页在不同浏览器上的表现不一致,这就是所谓的“浏览器兼容性问题”。...

    css兼容性(IE 和 firefox)技巧大全.doc

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE(Internet Explorer)和Firefox这两个浏览器之间的差异时。本文主要针对这些差异提供了一些实用的技巧,帮助开发者解决常见的CSS兼容...

    一个兼容IE、Chrome和Firfox的HTML固定表头例子

    通过分析`index.html`的结构和`style.css`、`script.js`中的代码,我们可以了解如何利用HTML、CSS和JavaScript协作实现这个功能,同时理解如何处理浏览器兼容性问题。这对于网页开发人员来说是一个有价值的实战案例...

    table自动拉伸在chrome与IE中的兼容性问题解决

    在网页开发中,表格(table)布局经常遇到各种兼容性问题,尤其是在不同的浏览器之间。本文主要探讨了在Chrome和IE浏览器中,table自动拉伸时的兼容性差异,并提供了相应的解决方案。 首先,我们要理解问题的核心:...

    IE浏览器和火狐浏览器兼容问题有部分js

    在代码示例中,通过在`&lt;head&gt;`标签中加入`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`来解决IE7和IE8的兼容性问题。同时,通过CSS Hack和媒体查询,针对不同浏览器提供了不同的颜色样式,确保在...

    2016年度最全整理浏览器兼容性问题与解决方案

    浏览器兼容性问题一直是前端开发中的重要议题,尤其是在2016年及以前,各种浏览器的市场份额和解析标准差异较大,导致开发者需要面对多种浏览器的显示差异。本文将针对标题和描述中提到的常见浏览器兼容性问题及其...

Global site tag (gtag.js) - Google Analytics