我正在设计一个网站,我正在设计移动版本/尺寸逐渐变小的网站。我已经检查过,这不是标签未被封闭或格式错误的问题;代码在html5中验证。我在桌面或平板电脑版本中没有出现此错误,但是当应用移动版本的媒体查询时,它会缩小。
对不起,这可能是一个非常复杂的问题!
以下是代码:
<table id="general"><tr>
<td class="cell-small"><h2>General Dermatology</h2><p>CanopyMD is a trusted, respected medical provider of treatments for diseases of the skin, hair, and nails.</p></td>
<td class="cell-big"><img src="general.jpg" class="right-img" alt="General Dermatology CanopyMD" /></td>
</tr></table>
<table id="cosmetic"><tr>
<td class="cell-big"><img src="cosmetic.jpg" class="left-img" alt="Cosmetic Dermatology CanopyMD"/></td>
<td class="cell-small"><h2>Cosmetic Dermatology</h2><p>Patients of our cosmetic services understand our sense of professionalism and responsibility.</p><p><a href="/cosmetic">View Our Services</a></p></td>
</tr></table>
<table id="about"><tr>
<td class="cell-small"><h2>About Us</h2><p>We have been serving the community for over a decade.</p><p><a href="/about/our-staff.html">Our Staff</a></p><p><a href="/about/our-office.html">Our Offices</a></p></td>
<td class="cell-big"><img src="about.jpg" class="right-img" alt="Our Office CanopyMD" /></td>
</tr></table>
<table id="contact"><tr>
<td class="cell-big"><img src="contact.jpg" class="left-img" alt="Live Chat CanopyMD" /></td>
<td class="cell-small"><h2>Contact Us/Live Chat</h2><p><a href="/contact.php">Make an Appointment</a></p><p><a href="/ask-a-nurse.php">Ask A Nurse</a></p></td>
</tr></table>
<table id="resources"><tr>
<td class="cell-small"><h2>Patient Resources</h2>
<form name="PrePage" method="post" action="https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx"><input type="hidden" name="LinkId" value="3bd29747-6b29-43c1-897c-77ec8b3a1d76" /><p><a href="#" onclick="PrePage.submit();">Make a Payment</a></p></form>
<p><a href="/resources/patient-forms.php">Patient Forms</a></p><p><a href="https://hartsoughdermatology.nextechweb.com/patient" target="_blank">Patient Portal</a></p></td>
<td class="cell-big"><img src="resources.jpg" class="right-img" alt="Patient Resources CanopyMD" /></td>
</tr></table>
这是适用的css:
.cell-big {
width: 58%;
border: none;
padding: 0;
line-height: 0;
}
.cell-big:nth-child(even) {
text-align: right;
}
.cell-big img {
max-width: 100%;
width: 100%;
}
@media all and (max-width: 689px) {
h2 { margin-bottom: 4%; }
h2::after { display: none; }
.cell-small a {
margin-left: 12.5%;
width: 75%;
}
body { background-image: none; }
table { width: 100%; }
.cell-big { display: none; }
.cell-small {
width: 100%;
padding: 4% 0 13% 0;
}
#header { margin-bottom: 0; }
#tree { display: none; }
#black { display: none; }
.thirds { display: none; }
#logo {
max-width: 70%;
width: 70%;
margin-left: 15%;
margin-top: 7%;
}
#iconholder {
width: 68%;
padding-top: 4%;
}
.cell-small::before {
content: "";
display: block;
width: 100%;
background-size: cover;
background-position: center;
height: 175px;
}
#general .cell-small::before { background-image: url("general.jpg"); }
#cosmetic .cell-small::before { background-image: url("cosmetic.jpg"); }
#about .cell-small::before { background-image: url("about.jpg"); }
#contact .cell-small::before { background-image: url("contact.jpg"); }
#resources .cell-small::before { background-image: url("resources.jpg");
}
}
这是整页的屏幕截图;这就是它在Chrome,Firefox和IE中的显示方式:
答案 0 :(得分:0)
在表格标签上,不要使用display:block;因为它已经有了一个显示:table;它用于正确格式化。