CSS 在 IE11 中有效，但在 IE8 中无效答案

【问题标题】：CSS works in IE11 but not in IE8CSS 在 IE11 中有效，但在 IE8 中无效
【发布时间】：2014-12-16 03:20:25
【问题描述】：

我的 CSS 代码在 IE11 中表现不错，但在 IE8 中似乎不太好。我已经尝试过使用：

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

但它没有正常工作。边距、边框和功能区类不起作用。
要添加一些信息，这里是 CSS：

body{
  background-image:url(images/bg4.jpg);
  background-repeat:no-repeat;
  font-family: 'Montserrat', Arial;
  font-size: 1em;
  background-size:100%;
}
.all{
    right: 100px;
    bottom: 20px;
    position: absolute;
    }
h2{
  text-align: center;
  color: #F1F2F4;
  text-shadow: 0 1px 0 #000;
}
a{
  text-decoration: none; color: #EC5C93; 
}
.ribbon{
  background: rgba(200,200,200,.5);
  width: 50px;
  height: 70px;
  margin: 0 auto;
  position: relative;
  top: 19px;
  border: 1px solid rgba(255,255,255,.3);
  border-top: 2px solid rgba(255,255,255,.5);
  border-bottom: 0;  
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 3px rgba(0,0,0,.7); 
}
.ribbon:before{
  content:"";
  display: block;
  width: 15px;
  height: 15px;
  background: #4E535B;
  border: 4px solid #cfd0d1;
  margin: 18px auto;
  box-shadow: inset 0 0 5px #000, 0 0 2px #000, 0 1px 1px 1px #A7A8AB;
  border-radius: 100%;
}
.login{
  background: #F1F2F4;
  border-bottom: 2px solid #C5C5C8;
  border-radius: 5px;
  text-align: center;
  color: #36383C;
  text-shadow: 0 1px 0 #FFF;
  max-width: 400px;
  padding: 10px 40px 5px 40px;
  box-shadow: 0 0 5px #000;
}
.login:before{
  content:"";
  display: block;
  width: 70px;
  height: 4px;
  background: #4E535B;
  border-radius: 5px;
  border-bottom: 1px solid #FFFFFF;
  border-top: 2px solid #CBCBCD;
  margin: 0 auto;
}
.font{
  font-size: 1.4em;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #191970;
  font-weight: bold;
}

p{
  font-family:'Helvetica Neue';
  font-weight: 300;
  color: #7B808A;
  margin-top: 0;
  margin-bottom: 30px;
}

input{  
  height: 30px;
  background: transparent;
  border: 2px solid gray;
  box-sizing: border-box;
  color: #71747A;
  text-shadow: 0 1px 0 #FFF;
  border-radius: 5px;
}
input:focus{
  outline: none;
}

button{
  margin-top: 20px;
  display: block;
  width: 30%;
  line-height: 1.1em;
  background: #0066FF;
  border-radius: 5px;
  border:0;
  border-top: 1px solid #0066FF;
  box-shadow: 0 0 0 1px #0066FF, 0 2px 2px #0066FF;
  color: #FFFFFF;
  font-size: 1em;
  text-shadow: 0 1px 2px #21756A;
  margin-left:155px;
}

虽然 HTML 在这里：

<?php
session_start();
?>

<html>
    <head>
        <title>Optis Appraisal System</title>
          <link href='login.css' rel='stylesheet' type='text/css'>
    </head>

    <script src="Plugins/placeholders.jquery.min.js"></script>

<body>   
    <div class="all">   
      <div class="ribbon"></div>
      <div class="login">       
           <br/><img src="images/optis3.jpg"/> <div class="font">Appraisal System</div>
          <p>Please login to start</p>    
          <form method="post" action="login.php">
                <table width=100%>
                    <tr>
                        <td>Username</td>
                        <td><input type="text" name="login"></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                </table>
            <center>
                <button name=commit>Login</button>
            </center>
          </form>
      </div>

        <footer>
            <center> 
                <font size="2" color="black"><br/>
                Developed by: <br/>
                anjomarc_topacio | mark.adriane | nica.dizon <br>
                Copyright 2014 &#169 Management Information System
                </font>
            </center>
        </footer>
    </div>

    </body>
</html>

您对如何解决这个问题有任何想法吗？我非常需要你的帮助。谢谢！

【问题讨论】：

如果你能更具体一些会有所帮助，哪些样式没有在 ie8 中应用？
边距、边框和功能区类不起作用。
立即跳 ie8 不支持 rgba()... 将其切换为纯十六进制颜色，然后查看仍然无法正常工作的内容。除非您使用 CSS Pie 之类的东西，否则 Box-shadow 和 border-radius 也已退出：css3pie.com
哦，我明白了。如果我将 rgba 更改为十六进制值，我会检查这是否会解决
谢谢！ rgba 到 rgb 的转换有帮助！我还有一个问题。盒子阴影不起作用。请问有什么办法吗？

标签： html css internet-explorer internet-explorer-8 internet-explorer-11

【解决方案1】：

对于初学者，IE8 不支持border-radius 或box-shadow。

caniuse.com is your friend.

【讨论】：

【解决方案2】：

有两种处理方式（ie8 不支持 css3 属性，如 box-shadow、border-radius）。 1）您可以对 ie8 使用 hack：要在 CSS 中定位 Internet Explorer 8 及更低版本，请将“9”附加到要应用的样式的末尾。例如

div {
  border: 2px solid #aaa; /* for all browsers */
  border: 2px solid #f009; /* IE8 and below - red border */
}

.element {
    margin-bottom: 20px;
    margin-bottom: 10px\9; /* IE8 */
}

2) 在 HTML 中使用条件语句：

 <!--[if lte IE 9]>
  Your IE8 and below HTML code here.
  Perhaps importing a specific style sheet.
<![endif]-->

例如：

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]>     <html class="ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

样式：

.element {
    margin-bottom: 20px;
}

.ie7 .element {
    margin-bottom: 10px;
}

.ie8 .element {
    margin-bottom: 15px;
}

【讨论】：

嗨！谢谢，但 html 中的条件语句不起作用。此外，margin、box-shadow 和border-radius 也不起作用。
Conditional 是一种在不影响其他浏览器的情况下提供特定于浏览器的样式的方法，margin 应该与我建议的 hack 和 box-shadow 一起使用，border-radius 是 IE8 不支持的 css3 属性.谢谢。

【解决方案3】：

如果你真的在 IE8 中寻找 css3 属性的替代品，你可能会使用图像来提供弯角效果和阴影，但会增加带宽和杂乱的代码。其他选择是 - http://css3pie.com/ - 试试border-radius.htc 可以从https://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip下载代码并测试一下。

【讨论】：