所以，我一直在建设网站，主要是利用Zurb Foundations进行布局和响应功能。最近，我第一次决定使用媒体查询从头开始破解它。我的CSS有点不稳定（我出于某种原因，不得不将我的第二部分降低260px以避免重叠第一部分）但是Chrome的工作做得很好。然而，在Firefox和Safari中，这两个部分保持在彼此之上。任何人都可以为我的问题推荐一个CSSolution吗？
谢谢， 约翰
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
@media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
@media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
@media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
@media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
@media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
@media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
答案 0 :(得分：0)
我已添加此媒体查询的一个属性
@media screen and (max-width: 700px) {
.wrap {
display: inherit !important;
}
}
/*home.css*/
p {
font-family: 'Droid Sans';
font-size: .8em;
}
h1, h2, h1 > a {
font-size: 1.2em;
font-weight: normal;
}
.landscape {
background-image: url("../img/landscape1.jpg");
background-size: cover;
border-radius: 25px;
height: 327px;
margin: 0 auto;
}
/*Styling for the Request A Quote form*/
.quote {
background-color: green;
font-size: .7em;
color: white;
z-index: -1;
}
.quote > h2 {
color: #fff;
font-size: 1.2me
}
input {
display: block;
width:180px;
color:black;
border-radius: 6px;
border: 1px solid #fff;
padding: 7px;
}
#submit {
width: 80px;
}
/*Landscape image settings for large screens*/
@media screen and (min-width: 900px) {
.landscape {
width: 890px;
height: 327px;
max-width: 1000px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Form styles for large screen*/
@media screen and (min-width: 700px) {
.quote {
float: right;
width: 220px;
height: 327px;
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
.offer {
display: none;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
/*Landscape styles for 700 > 900px screens*/
@media screen and (max-width: 900px) {
.landscape {
height: 327px;
}
.your-yard-left {
border-radius: 25px 0 0 25px;
width: 70%;
}
}
@media screen and (max-width: 700px) {
.landscape {
width: 100%;
height: 200px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.quote {
position: relative;
top: 200px;
border-radius: 0 0 25px 25px;
padding: 10px 0 10px 0;
height: 240px;
float: none;
width: 60%;
}
form, .quote > h2 {
padding: 0 10px;
}
input {
width: 250px;
}
.offer {
display: block;
float: right;
background-color: #A8CD1B;
position: relative;
top: -60px;
z-index: 1;
width: 40%;
min-width: 120px;
height: 240px;
padding: 10px 20px;
border-radius: 0 0 25px 0;
}
.wrap {
display: inherit !important;
}
.offer > p {
color: black;
font-size: .8em;
}
.your-yard-left {
width: 100%;
display: block;
position: relative;
top: -50px;
border-radius: 25px 0 0 25px;
width: 70%;
}
.your-yard-right {
width: 100%;
display: block;
position: relative;
top: -50px;
height: 260px;
}
}
@media screen and (max-width: 650px) {
.offer {
width: 30%;
}
.quote {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.offer {
display: none;
}
.quote {
width: 100%;
}
.your-yard-left {
float: none;
position: relative;
border-radius: 25px 25px 25px 25px;
top: 260px;
overflow: none;
width: 100%;
}
.your-yard-right {
float: none;
position: relative;
top: 260px;
display: none;
}
}
.your-yard-left {
background-color: #A8CD1B;
float: left;
margin-top: 10px;
padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
margin-left: 10px;
}
.your-yard-right {
background-color: green;
border-radius: 0 25px 25px 0;
margin-top: 10px;
width: 30%;
float: right;
z-index: 1;
overflow: hidden;
}
.your-yard-right img {
max-height: 150px;
display: block;
text-align: center;
margin: 10px auto;
}
.center {
clear: both;
}
@media screen and (min-width: 1010px) {
.your-yard {
max-width: 1000px;
}
.wrap {
max-width: 1000px;
margin: auto;
}
}
.wrap {
display: flex;
}<!DOCTYPE html>
<html>
<head>
<title>Helping Hand Lawn Care</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--#include virtual="includes/nav.inc"-->
<div class="landscape">
<div class="quote">
<h2>Request A Quote!</h2>
<form>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<input type="text" id="phone" placeholder="Phone"><br/>
<input type="text" id="address" placeholder="Address"><br/>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="offer">
<h2>We'll Be In Touch</h2>
<p>Drop us a message and we'll have one of our certified landscape technicians come by, inspect your property and give you a quote. Our prices are always fair and our service always top notch. See what </p>
</div>
</div>
<div class="wrap">
<div class="your-yard-left">
<h2 class="center ">Your Yard, Your Pride, Your Way</h2>
<p>Since 2003, Helping Hand Lawn Care has serviced homes, businesses and governmental facilities throughout the Central Florida area in full-service landscape maintenance, installation, irrigation and pest control company. Our team has the experience, knowledge and dedication it takes to invision and execute the projects it takes to get your lawn looking great.<p>
<p>Contact us today to have a landscape professional offer a quote! We offer seasonal and annual packages for all size properties.
</div>
<div class="your-yard-right">
<img src="img/landscape2.jpg">
</div>
</div>
<!--
<div class="center">
<h2>Why Helping Hand?</h2>
<ul>
<li>Quality work</li>
<li>Consistent arrivals</li>
<li>Outstanding customer service</li>
<li>Over 15+ years industry experience</li>
</div>
-->
<script src="js/vendor/jquery.js"></script>
<script src="js/menu.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
答案 1 :(得分：0)
所以，增加了
.wrap { 显示：继承！重要 }
解决了与Chrome相比Safari和Firefox差异的问题。对于第二部分垂直渲染的问题，我注意到我已经在其中一个div中包含了2％的填充权，而没有在divs宽度中考虑到这一点。谢谢你的帮助！