English 中文(简体)
IE9 具有超文本和CSS的问题
原标题:IE9 issues with HTML and CSS
  • 时间:2012-05-01 02:15:24
  •  标签:
  • html
  • css

我与IE9和Im相比也存在问题。 下面是我的安保部。 它完全在 Chrome、Sato和Fox开展工作。 我试图避免另立一席之地。 CSS for IE. 令我感到担忧的是,这是我第一次发言,请让我知道,你是否需要更多的信息。

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background-image: url( ../images/white_side.jpg );
}
#container {
    width: 1280px;
    margin: 0 auto;
    margin-top: -10px;
    align: center;
}
#masthead {
    width: 100%; 
    height: 170px;
    background-image: url( ../images/header.jpg );
    background-repeat: no-repeat;
}
#content {
    float: left;
    width: 100%;
    background-image: url( ../images/background.jpg );
    background-repeat: no-repeat;
}
#footer {
    text-align: center;
    clear: both;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #a9a9a9;
    border-bottom: 1px solid #a9a9a9;
}
#footer p {
    color: #DD7500;
    margin-top: 5px;
}
#footer a {
    color: #DD7500;
    text-decoration: underline;
}
#footer a:hover {
    color: black;
    text-decoration: none;
}
#menu{
    float: left;
    list-style-type: none;
    margin-top: 95px;
    margin-left: -40px;
}
#home{
    float: left;
    list-style-type: none;
}
#post{
    float: left;
    list-style-type: none;

}
#input{
    float: left;
    list-style-type: none;
    margin-left: 100px;
    margin-top: 15px;
}
#search{
    width: 210px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}
#deals{
    float: left;
    list-style-type: none;
    margin-left: 90px;
}
#login{
    float: left;
    list-style-type: none;
}
#registrationul{
    float: right;
    list-style-type: none;
    margin-top: -20px;
}
#welcome{
    float: left;
    list-style-type: none;
}
#register{
    float: left;
    list-style-type: none;
}
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
}
#loginButton { 
    float:right;
    position:relative;
    z-index:30;
    cursor:pointer;
}
#loginButton img {
    color: white;
    font-size:24px; 
    background-image:url(../images/login.jpg) no-repeat ;
}
#loginButton:hover {
    background-image:url(../images/loginafter.jpg);
}
#loginBox {
    position:absolute;
    top: 70px;
    right: 0px;
    display:none;
    z-index:29;
}
#loginForm {
    width:248px; 
    -moz-border-radius:3px 0 3px 3px;
    margin-top:-1px;
    padding:6px;
}
#loginForm fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}
fieldset#body {
    background-color: rgba(0,0,0,0.4);
    -moz-border-radius:3px;
    padding:10px 13px;
    margin:0;
}
#body label {
    color: white;
    margin:9px 0 0 0;
    display:block;
    float:left;
}
#loginForm #body fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
}
#loginForm input {
    width:92%;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:10px;
    color:#3a454d;
    font-weight:bold;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    font-size:12px;
}
#loginForm #login {
    width:auto;
    float:left;
    color:black;
    padding:7px 10px 8px 10px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
    padding:7px 2px 8px 2px; /* IE7 Fix */
}
#loginForm span {
    background-color: rgba(0,0,0,0.4);
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
}
#loginForm span a {
    color:white;
    font-size:12px;
}
#rightpannel{
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    width: 600px;
    height: 350px;
    background: rgba(0, 0, 0, 0.5);
}
#bottompannel{
    margin-top: 400px;
    margin-left: 20px;
    width: 1240px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
}
#leftpannel{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    width: 600px;
    height: 350px;
    background: rgba(0, 0, 0, 0.5);
}
问题回答

IE s parser远不如Webkit(Chrome / Sato)或Gecko(Firefox)的错误容忍度。 http://validator.w3.org/“rel=“nofollow”>validation Service。 有了很好的机会,你就想在某个地方关闭一个贴上标识的标签(我讲个人经验)。

页: 1

<ul id="registrationul">
  <li id="welcome"></li>
  <li id="register"><a id="userButton" href="register.php"><img onmouseout="hideIt(this,  images/register_plain.jpg )" onmouseover="showIt(this,  images/register_hover.jpg )" id="imageshow6" alt="" src="images/register_plain.jpg"><em></em></a></li>
</ul>
<div style="clear:both;"></div><!-- clears floated elements (in this case ul#menu and ul#registrationul) -->

你们永远不会让IE试图像其他更现代的浏览器那样做,而没有这种照样。 现代网页需要一种信条式,没有一页,你就采用静坐式。 增加这一条,作为你的第1行:<! DOCTYPE html>





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签