0
因此，我一直在构建网站很长一段时间，主要利用Zurb基础来布局和响应功能。最近，我第一次决定使用媒体查询彻底破解它。我的CSS有点过分（因为某些原因，我不得不将第二部分减小260px以避免第一部分重叠），但在Chrome中完成这项工作很好。然而，在Firefox和Safari中，这两个部分保持在另一个上面。任何人都可以为我的问题推荐CSSolution吗？响应式设计在Firefox中失效
感谢， 约翰
/*home.css*/
p {
\t font-family: 'Droid Sans';
\t font-size: .8em;
}
h1, h2, h1 > a {
\t font-size: 1.2em; \t
\t 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 {
\t background-color: green;
\t font-size: .7em;
\t color: white;
\t 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) {
\t .landscape {
\t \t width: 890px;
\t \t height: 327px;
\t \t max-width: 1000px; \t
\t }
\t .your-yard-left {
\t \t border-radius: 25px 0 0 25px;
\t \t width: 70%;
\t }
\t
}
/*Form styles for large screen*/
@media screen and (min-width: 700px) {
\t .quote {
\t \t float: right;
\t width: 220px;
\t height: 327px;
\t border-radius: 0 25px 25px 0;
\t padding: 0 15px;
\t }
\t .offer {
\t \t display: none;
\t }
\t .your-yard-left {
\t \t border-radius: 25px 0 0 25px;
\t \t width: 70%;
\t }
}
/*Landscape styles for 700 > 900px screens*/
@media screen and (max-width: 900px) {
\t .landscape {
\t \t height: 327px;
\t }
\t .your-yard-left {
\t \t border-radius: 25px 0 0 25px;
\t \t width: 70%;
\t }
}
@media screen and (max-width: 700px) {
\t .landscape {
\t \t width: 100%;
\t \t height: 200px;
\t \t border-bottom-right-radius: 0;
\t \t border-bottom-left-radius: 0;
\t }
\t .quote {
\t \t position: relative;
\t \t top: 200px;
\t \t border-radius: 0 0 25px 25px;
\t \t padding: 10px 0 10px 0;
\t \t height: 240px;
\t \t float: none;
\t \t width: 60%;
\t }
\t form, .quote > h2 {
\t \t padding: 0 10px;
\t }
\t input {
\t \t width: 250px;
\t }
\t .offer {
\t \t display: block;
\t \t float: right;
\t \t background-color: #A8CD1B;
\t \t position: relative;
\t \t top: -60px;
\t \t z-index: 1;
\t \t width: 40%;
\t \t min-width: 120px;
\t \t height: 240px;
\t \t padding: 10px 20px;
\t \t border-radius: 0 0 25px 0;
\t }
\t .offer > p { \t
\t \t color: black;
\t \t font-size: .8em;
\t }
\t .your-yard-left {
\t \t width: 100%;
\t \t display: block;
\t \t position: relative;
\t \t top: -50px;
\t \t border-radius: 25px 0 0 25px;
\t \t width: 70%;
\t }
\t .your-yard-right {
\t \t width: 100%;
\t \t display: block;
\t \t position: relative;
\t \t top: -50px; \t
\t \t height: 260px;
\t }
}
@media screen and (max-width: 650px) {
\t .offer {
\t \t width: 30%;
\t }
\t .quote {
\t \t width: 70%;
\t }
}
@media screen and (max-width: 500px) {
\t .offer {
\t \t display: none;
\t }
\t .quote {
\t \t width: 100%;
\t }
\t .your-yard-left {
\t \t float: none;
\t \t position: relative;
\t \t border-radius: 25px 25px 25px 25px;
\t \t top: 260px;
\t \t overflow: none;
\t \t width: 100%;
\t }
\t .your-yard-right {
\t \t float: none;
\t \t position: relative;
\t \t top: 260px;
\t \t display: none;
\t }
}
.your-yard-left {
\t background-color: #A8CD1B;
\t float: left;
\t margin-top: 10px; \t
\t padding-right: 2%;
}
.your-yard-left > h2, .your-yard-left > p {
\t margin-left: 10px;
}
.your-yard-right {
\t background-color: green;
\t border-radius: 0 25px 25px 0;
\t margin-top: 10px;
\t width: 30%;
\t float: right;
\t z-index: 1;
\t overflow: hidden;
}
.your-yard-right img {
\t max-height: 150px;
\t display: block;
\t text-align: center;
\t margin: 10px auto;
}
.center {
\t clear: both;
}
@media screen and (min-width: 1010px) {
\t .your-yard {
\t \t max-width: 1000px;
\t }
\t .wrap {
\t \t max-width: 1000px;
\t \t margin: auto;
\t }
}
.wrap {
\t 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'>
\t <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>
哇！多可爱的，雄辩的修复。你怎么知道包括这一点？非常感谢！ – whosecatisthis
Ohp！它似乎没有解决在Safari中的问题，这似乎是第二部分的左边部分和右边部分对于包装渲染太大了？右侧出现在左下方。 – whosecatisthis