Skip to content

Instantly share code, notes, and snippets.

@shuiRong
Last active January 3, 2020 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shuiRong/f3206e73bc0e4fd9aff9eb67e362193a to your computer and use it in GitHub Desktop.
Save shuiRong/f3206e73bc0e4fd9aff9eb67e362193a to your computer and use it in GitHub Desktop.
奇怪的移动端Bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<style type="text/css">
#DIV_1 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.9);
height: 0px;
text-decoration: none solid rgba(0, 0, 0, 0.9);
width: 1080px;
column-rule-color: rgba(0, 0, 0, 0.9);
perspective-origin: 540px 0px;
transform-origin: 540px 0px;
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_1*/
#DIV_1:after {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_1:after*/
#DIV_1:before {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_1:before*/
#DIV_2 {
bottom: 1637px;
color: rgba(0, 0, 0, 0.9);
display: flex;
height: 198px;
left: 0px;
position: fixed;
right: 0px;
text-decoration: none solid rgba(0, 0, 0, 0.9);
top: 0px;
width: 1057px;
z-index: 100;
column-rule-color: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: space-between;
perspective-origin: 540px 141.5px;
transform-origin: 540px 141.5px;
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
padding: 85px 0px 0px 23px;
}
/*#DIV_2*/
#DIV_2:after {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_2:after*/
#DIV_2:before {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_2:before*/
#DIV_3 {
background-position: 0px 0px;
bottom: 0px;
color: rgba(0, 0, 0, 0.9);
height: 283px;
left: 0px;
position: absolute;
right: 0px;
text-decoration: none solid rgba(0, 0, 0, 0.9);
top: 0px;
width: 1080px;
z-index: 1;
column-rule-color: rgba(0, 0, 0, 0.9);
perspective-origin: 540px 141.5px;
transform-origin: 540px 141.5px;
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
background: rgb(255, 255, 255) url("https://i.imgur.com/P9xxsyg.png") no-repeat scroll 0px 0px / cover padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_3*/
#DIV_3:after {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_3:after*/
#DIV_3:before {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_3:before*/
#DIV_4 {
bottom: -295px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.9);
height: 578px;
left: 0px;
position: absolute;
right: 0px;
text-decoration: none solid rgba(0, 0, 0, 0.9);
top: 0px;
width: 1080px;
column-rule-color: rgba(0, 0, 0, 0.9);
perspective-origin: 540px 289px;
transform-origin: 540px 289px;
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
background: rgba(0, 0, 0, 0) url("https://i.imgur.com/P9xxsyg.png") repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_4*/
#DIV_4:after {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_4:after*/
#DIV_4:before {
color: rgba(0, 0, 0, 0.9);
text-decoration: none solid rgba(0, 0, 0, 0.9);
column-rule-color: rgba(0, 0, 0, 0.9);
user-select: none;
caret-color: rgba(0, 0, 0, 0.9);
border: 0px none rgba(0, 0, 0, 0.9);
font: normal normal 400 normal 40px / 40px sans-serif;
outline: rgba(0, 0, 0, 0.9) none 0px;
}
/*#DIV_4:before*/
</style>
</head>
<body>
<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
</div>
<!---->
</div>
<div id="DIV_4">
</div>
<!---->
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">
#DIV_2 {
height: 15vh;
left: 0px;
position: absolute;
top: 0px;
width: 100vw;
background: url("https://i.imgur.com/P9xxsyg.png")
}
#DIV_3 {
height: 30vh;
left: 0px;
position: absolute;
top: 0px;
width: 100vw;
background: url("https://i.imgur.com/P9xxsyg.png")
}
</style>
</head>
<body>
<div id="DIV_2">
</div>
<div id="DIV_3">
</div>
</body>
</html>
@shuiRong
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment