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

标签 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>

我希望问题得到解释

最佳答案

将视口(viewport)宽度和高度用于 With & Height。像宽度:##vw;

关于css - 如何编辑以适应所有浏览器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34140888/

相关文章:

html - 如何设置带边框的 100% 高度的 Div?

javascript - 添加和更改类

javascript - Wordpress 主题重复但在不同域上显示不同

javascript - 如何在整个网站上保留切换状态?

css - codeoutsidehtmlislocked false Dreamweaver 我可以编辑这段代码。?

javascript - div 磁贴上的 Jquery 单击事件不起作用

java - 如何在表vaadin中设置复选框的大小

html - 从工具提示中隐藏标题

css - IE 6.0 中的布局问题

html - 基于 CSS 的悬停菜单在 IE7 中被隐藏