[英]CSS works in IE11 but not in IE8
I have CSS codes which is good at IE11 but seemingly not good in IE8. 我有擅长IE11的CSS代码,但似乎不擅长IE8。 I already tried using: 我已经尝试使用:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
but it didn't work fine. 但效果不佳。 Margins, borders and the ribbon class is not working. 边距,边框和功能区类别无效。
To add some info, here is the CSS: 要添加一些信息,这是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;
}
While the HTML is here: 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 © Management Information System
</font>
</center>
</footer>
</div>
</body>
</html>
Do you have any idea on how to solve this? 您对如何解决这个问题有任何想法吗? I badly need your help. 我非常需要您的帮助。 Thanks! 谢谢!
there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8). 有两种处理方法(ie8中将不支持css3属性,例如box-shadow,border-radius)。 1) you can use hacks for ie8 : To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. 1)您可以对ie8使用技巧:要在CSS中定位Internet Explorer 8及以下版本,请在要应用的样式的末尾附加“ 9”。 eg 例如
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) using conditional statements from within your HTML : 2)在您的HTML中使用条件语句:
<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->
eg : 例如:
<!--[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]-->
styles : 样式:
.element {
margin-bottom: 20px;
}
.ie7 .element {
margin-bottom: 10px;
}
.ie8 .element {
margin-bottom: 15px;
}
For starters, IE8 does not support border-radius
or box-shadow
. 对于初学者,IE8不支持border-radius
或box-shadow
。
if you are really looking for a alternative for css3 attributes in IE8 , you could probably use an image to give the curved corner effect and shadow, at the cost of increased bandwidth and messy code. 如果您确实要在IE8中寻找css3属性的替代方法,则可能会使用图像来产生弯角效果和阴影,但代价是带宽增加和代码混乱。 Other alternative is - http://css3pie.com/ - try border-radius.htc can download the code from https://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip and test it. 另一种方法是- http://css3pie.com/ -尝试边境radius.htc可以下载代码https://code.google.com/p/curved-corner/downloads/detail?name=border-radius- demo.zip并对其进行测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.