Question

我正在为自动化平台制作标题导航/页面主体。我试图找出如何在IE中正确显示按钮。我试过换掉一些标签但仍然没有。

似乎在Moz和Chrome中显示得很好，但IE有一些问题：

图片周围的边框。
按钮占据了整个空间
在所有文档中，我希望空白区域在页面上下延伸（我不希望在页面的顶部或底部看到小的蓝色背景）
< / LI>
我无法弄清楚如何在Moz布局上获得圆角。

我可以得到一些关于我哪里出错的建议。查看我的每个界面和代码的截图...

..使用Dreamweaver编辑和测试代码。

<!-- language: lang-html -->

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
   <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
   <div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" atl="Logo" class="logo" alt="Visit Medata Home Page"></div>

<div id="nav">
<ul>
<li>NewsWorthy</li>
<li>Solutions</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
<div id="">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

页面的CSS：

//!--My Custom CSS--!//
   body {
       margin:0; padding:0;
   }
   html, body, #bg {
       height:100%;
       width:100%;
   }
   #bg {
       position:absolute; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow: hidden;
       background-repeat: inherit;
       z-index:-1;
       padding-bottom: 25px;
   }
   #bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
   }
   #content {
       z-index:1;
       overflow: auto;
   }
   #main
    {
    margin: auto !important;
    visibility: visible !important;
    -webkit-border-radius: 5px !important;
    -webkit-box-shadow: 0px 0px 20px #000 !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-shadow: 0px 0px 20px #000 !important;
    box-shadow: 0px 0px 20px #000 !important;
    background-color: #fff;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    }
#top-left {
    float: left;
    display: block;
}
#top-left img {
        height: 73px;
        width: 329px;
        padding-left: 20px;
        padding-top: 20px;
}

#nav {
    margin: 0;
    padding: auto;
}
ul {
    display: table-row;
    float: right;
}
#nav li {
    background: #043d70;
color: white !important;
padding: 8px 20px;
display: inline;
border-radius: 3px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
margin: 20px 8px 0px 0px;
text-align: center;
float: right;
}
#nav li:hover {
text-decoration: none;
 background: #43434A;
}
#nav li a {
    color: #fff;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
}   
#main {
    height: 100%;
}

.footer {
        font-family: Tahoma, Geneva, sans-serif; color: #666666;    
        font-size: 10px;
        width: 12.5%;
        column-span: all !important;
        display: block;
    }
//!--End My Custom CSS --! //

由于

在IE中正确渲染CSS

0 个答案: