不同浏览器测试效果相差很大
来源：7-2 作业题
qq_鸭绿桥第一帅哥_0
2019-03-27 17:26:40
360浏览器，出现了文字溢出的状况。火狐和谷歌基本正常。请问老师是我代码有问题还是浏览器的问题？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>7-2</title>
<link rel="stylesheet" type="text/css" href="css/7-2.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/7-2.js"></script>
</head>
<body>
<!-- 总容器 -->
<div class="box">
<!-- 第一区域 -->
<div class="one">
<!-- 头部导航 -->
<div class="nav">
<a href="#">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</div>
<div class="nav1">
<span>IMOOC</span>
<button></button>
<div class="menu">
<a href="#">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</div>
</div>
<img src="img/1.png">
<span>IMOOC</span>
<input type="submit" value="start" />
</div>
<!-- 第二区域 -->
<div class="two">
<a href="#">关于慕课网</a>
<a href="#">关于课程</a>
<a href="#">核心团队</a>
<a href="#">新增专题</a>
</div>
<!-- 第三区域 -->
<div class="three">
<h2>响应式</h2>
<p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。
</p>
</div>
<!-- 第四区域 -->
<div class="four">
<span>IMOOC</span>
<span>welcome to <a href="#">www.imooc.com</a></span>
</div>
<!-- 第五区域 -->
<div class="five">
<div>主打课程</div>
<div>
<img src="img/1.jpg">
</div>
<div>
<img src="img/2.jpg">
</div>
<div>
<img src="img/3.jpg">
</div>
<div>
<img src="img/4.jpg">
</div>
<div>
<img src="img/5.jpg">
</div>
<div>
<img src="img/6.jpg">
</div>
</div>
<!-- 第六区域 -->
<div class="six">
Copyright © 2017 imooc.com All Rights Reserved
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/* 第一区域 */
.one {
display: flex;
background: #B2C5CC;
flex-direction: column;
align-items: center;
}
.nav {
width: 60%;
text-align: center;
height: 3rem;
padding-top: 1.5rem;
box-sizing: border-box;
display: flex;
justify-content: space-around;
}
.nav1{
display: none;
}
.nav a:first-child {
color: #afafaf;
}
.nav a {
color: #757575;
}
.one img {
padding: 2rem 0;
}
.one span {
font-size: 1rem;
color: white;
}
.one input {
width: 7rem;
height: 1.5rem;
text-align: center;
line-height: 1.5rem;
background: white;
border: none;
margin-top: 3rem;
margin-bottom: 10rem;
}
/* 第二区域 */
.two {
width: 100%;
height: 3rem;
display: flex;
}
.two a {
width: 25%;
display: inline-block;
color: #bababa;
border-bottom: 1px solid #ccc;
text-align: center;
height: 100%;
line-height: 3rem;
}
.two a:first-child {
color: #545454;
}
/* 第三区域 */
.three p {
color: #bababa;
font-size: 1rem;
width: 70%;
padding-top: 2rem;
}
.three {
width: 100%;
height: 30rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 第四区域 */
.four {
width: 100%;
height: 3rem;
background: #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 3rem;
padding-right: 3rem;
box-sizing: border-box;
color: #545454;
}
.four a {
color: black;
}
/* 第五区域 */
/* ipad */
.five {
padding-top: 2rem;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 3rem;
padding-right: 3rem;
box-sizing: border-box;
padding-bottom: 1rem;
background: url('../img/bg.jpg');
background-size: 100% 100%;
}
.five div {
width: 30%;
display: inline-block;
margin-bottom: 2rem;
}
.five div:first-child {
margin-bottom: 1rem;
color: #545454;
width: 100%;
}
.five div img {
width: 100%;
height: 100%;
}
/* 第六区域 */
.six{
width: 100%;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
font-size: 1.3rem;
}
/* iphone6 */
@media screen and (max-width: 700px) {
/* 第五区域 */
.five {
padding-top: 2rem;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 1rem;
padding-right: 1rem;
}
.five div {
width: 47%;
display: inline-block;
margin-bottom: 1rem;
}
.five div:first-child {
margin-bottom: 1rem;
color: #545454;
}
.five div img {
width: 100%;
height: 100%;
}
/* 第六区域 */
.six{
font-size: .5rem;
}
/* 导航区 */
.nav{
display: none;
}
.nav1{
display: block;
position: relative;
background: #7EA6B1;
height: 3rem;
width: 100%;
text-align: center;
}
.nav1 span{
display: inline-block;
height: 100%;
line-height: 3rem;
}
.nav1 button{
width: 1rem;
height: 1rem;
position: absolute;
right: 1rem;
top: 1rem;
background: #7EA6B1;
border: 2px solid #ccc;
cursor: pointer;
}
.menu{
position: absolute;
top: -9rem;
width: 100%;
display: block;
}
.menu a{
display: block;
width: 100%;
background: #7EA6B1;
height: 1.5rem;
font-size: 1rem;
color: white;
border-top: 1px solid white;
}
/* 第四区域 */
.four{
flex-direction: column;
justify-content: space-around;
padding: 2rem 0;
}
}
$(document).ready(function(){
var index=true;
$('button').click(function(){
if (index==true)
{
$('.menu').stop().animate({'top':'3rem'},500);
index=false;
}
else
{
$('.menu').stop().animate({'top':'-9rem'},500);
index=true;
}
})
})写回答
1回答
-
你好，这边使用360安全浏览器和360极速浏览器测试出来效果是没有问题的：
使用主流浏览器测试成功就可以，因为这两个页面是手机设备上的，浏览器也只是模拟手机设备，不同的浏览器可能效果会有所不同。
自己可以重新测试下，祝学习愉快！
0
相似问题