个人中心
gpt4 book ai didi

html - IE 特定样式表打击其他版本的 IE

转载 作者：行者123 更新时间：2023-11-28 13:04:26 27 4
gpt4 key购买 nike

我试图在 IE7+8 中使用字体图标并遇到了一个问题，这个问题可以通过仅 IE7 的样式表轻松解决。长话短说，现在 IE7 和 IE9 都以某种方式运行我的仅 IE7 样式表(IE8 运行得很好)。我不明白为什么。

<head>
    <!-- CSS3 in IE7+8 -->
    <!--[if (gte IE 6)&(lte IE 8)]>
      <script src="js/selectivizr.js"></script>
      <noscript><link rel="stylesheet" href="css/style.css" /></noscript>
    <![endif]-->

    <!-- META -->
    <meta charset="utf-8" />

<!-- TITLE -->
<title>title</title>

<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="shortcut icon" href="img/favicon.ico" />

 <!-- Icomoon in IE7 / IE7.CSS -->
    <!--[if lte IE 7]>
        <script src="js/lte-ie7.js"></script>
        <link rel="stylesheet" href="css/ie7.css" />
    <![endif]-->

<!--FONTS-->
    <link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="container">
       <div id="header" role="banner">
            <a href="#"><img src="img/logo.png" title="title" alt="" /></a>
    </div> <!-- end #HEADER -->

    <div id="main" role="main">
        <div class="left content">
            <h2>WHAT WE DO</h2>
        </div>

        <div class="center content">
            <h2>OUR SPECIALTIES</h2>

            <ul>
                <li><a aria-hidden="true" data-icon="f">WATER</a></li>
                <li><a aria-hidden="true" data-icon="$">FIRE</a></li>
                <li><a aria-hidden="true" data-icon="#">LIGHTING</a></li>
                <li><a aria-hidden="true" data-icon="a">AUDIO</a></li>
                <li><a aria-hidden="true" data-icon="!">TECH F/X</a></li>
            </ul>
        </div>

        <div class="left content">
            <h2>CONTACT US</h2>

            <div class="info">
                <p>Name</p>
                <p>e: <span class="brown"><a href="#">email</a></span></p>
                <p>p: <span class="brown">888-888-8888</span></p>
            </div>

            <div class="info">
                <p>Name</p>
                <p>e: <span class="brown"><a href="#">email</a></span></p>
                <p>p: <span class="brown">888-888-8888</span></p>
            </div>
        </div>

    </div> <!-- end #MAIN -->

    <div id="footer" role="contentinfo">
        <p>&copy;</p>
    </div> <!-- end #FOOTER -->
</div> <!-- end #CONTAINER -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

CSS

@font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.woff') format('woff'),
    url('/fonts/icomoon.ttf') format('truetype'),
    url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

/* UNIVERSAL
=================================*/ 

body {
    background-color: #292929;
    background: url("/img/bg.png") repeat;
    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
    font-size: 62.5%;     /* 1em = 10px */
    -webkit-font-smoothing: antialiased;
}

#container {
    width: 960px;
    margin: 0 auto;
}

h2 {
    display: inline-block;
    font-family: 'Maiden Orange', cursive;
    font-size: 3.5em;
    font-weight: 100;
    color: #3c2811;
    padding: 0 0 2px 0;
    border-bottom: 1px #3c2811 solid;
}

a,
.center a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

p {
    color: #fff;
}

a,
.brown,
.center a:hover {
    color: #3c2811;
}

li {
    list-style: none;
    margin: 0 0 20px 10px;
}

/* HEADER
=================================*/
#header {
    background: url("/img/ribbon.png") no-repeat center;
    height: 99px;
    margin: 60px 0 0 0;
    position: relative;
}

#header img {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 35%;
}


/* MAIN
=================================*/
#main {
    overflow: hidden;
}

#main div:first-child h2 {
    margin-left: 65px;
}
#main div:nth-child(2) h2 {
    margin-left: 40px;
}
#main div:last-child h2 {
    margin-left: 65px;
}

.content {
    margin: 20px 0 0 0;
    float: left;
    height: 439px;
    width: 320px;
}

.left {
    background: url("/img/left-bg.png") no-repeat;
}

.left p {
    font-size: 2em;
    margin: 0 40px 0 20px;
    line-height: 1.9;
}

/*    CENTER    */
.center {
    background: url("/img/center-bg.png") no-repeat;
}

.center a {
    color: #fff;
    font-size: 3em;
    -webkit-transition:     color 0.15s ease-in;
       -moz-transition:     color 0.15s ease-in;
        transition:     color 0.15s ease-in;
}

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    padding: 0 30px 0 0;
}

/*    CONTACT  */
.info {
    margin: 0 0 30px 0;
}

.info p:first-child {
    padding: 0 0 10px 0;
}

.info p:nth-child(n+2) {
    font-size: 1.7em;
    line-height: 1.5;
}

/* FOOTER
=================================*/
#footer {
    text-align: center;
    font-family: 'Maiden Orange';
    font-size: 2.4em;
    margin: 0 0 20px 0;
}

最佳答案

你的<head>之前是什么标签？不正确的标记可能会触发怪癖模式或兼容模式。

通过在 <head></head> 中添加此标记，尝试明确要求 IE 使用可用的最新呈现引擎呈现您的页面。 :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

关于html - IE 特定样式表打击其他版本的 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15940018/

27 4 0
文章推荐： css - css/main.css 是否还有其他用途？
文章推荐： jquery动画优化
文章推荐： javascript - 拼接 JSON 数组 JavaScript
文章推荐： jquery - 使用可滚动菜单固定主要内容的位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com