如何编辑以适应所有浏览器?

时间:2015-12-07 18:46:19

标签: css

image demonstrate the problem

我遇到的问题是网站的显示方式不同于分辨率。

/* CSS Document */

a{
	text-decoration:none;
}

body{
	background-color:#F2F2F2;
	font-family:Arial, Helvetice, sans-serif;
	font-size:14px;
	margin:0 auto;
	line-height:1.5;
	width:100%
}
#body{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
#wrap{
	height:auto;
}

.logo{
	margin-left:2%;
	margin-top:5%;
	float:left;
	width:auto;
}

.kuka{
	margin-left:39.5%;
	width:auto;
}

#nav{
	background-color:#3394e1;
	color:#FFF;
	box-shadow: 0px 5px 0px #00377c;
	width:90%;
}

#nav ul{
	list-style:none;
	margin:0 auto;
}


#nav ul li{
	display:inline;
}

#nav a:link, .siteheader  a:visited {
	display:inline-block;
	padding:1.4% 0.3%;
	font-weight:bold;
	font-size:12px;
	margin-left:auto;
	margin-right:auto;
}

#nav a:hover, .siteheader  a:active,
#nav .active a:link .siteheader .active a:visited {
	background-color:#FFF;
	color:#000;
	text-shadow:none;
}

#nav ul li a {
	position:relative;
	color:#FFF;
}

我认为这个问题不在CSS中, 我认为问题很简单,但我无法解决。

html代码

<div id="wrap">
        	<div id="header">
            	<div class="logo">
                	<img src="image/logo.png" alt="Logo" width="230" height="105">
                </div>
                <div class="kuka">
                	<img src="image/Website-Banner-final.png" alt="kuka" width="736" height="190">
                </div>
                <div id="nav">
                	<ul class="nav">
                    	<li><a href="index.html">Home</a></li>
            			<li><a href="company_profile.html">Company Profile</a></li>
           				<li><a href="about_robotics.html">About Robotics</a></li>
           				<li><a href="solutions.html">Solutions</a></li>
          				<li><a href="automation.html">Automation</a></li>
          				<li><a href="used_machines.html">Used Machines</a></li>
          				<li><a href="partners.html">Partners</a></li>
          				<li><a href="technical_support.html">Technical Support</a></li>
          				<li><a href="send_an_enquiry.html">Send An Enquiry</a></li>
          				<li><a href="join_our_team.html">Join Our Team</a></li>
           				<li><a href="downloads.html">Downloads</a></li>
           				<li><a href="contact_us.html">Contact US</a></li>
                    </ul>
                </div>
    		</div>

我希望解释问题

1 个答案:

答案 0 :(得分:0)

使用视口宽度和高度为With&amp;高度。像宽度:## vw;