我这里有一个很奇怪的情况。 我有这个 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/1/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/1/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/4/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/4/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/2/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/2/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat 🌮</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/3/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/3/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/5/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/5/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
还有我的 CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
- 在常规桌面模式下查看时，一切正常。
- 在 Chrome + 移动视口(viewport)上，x 轴上有轻微溢出。
- 在 Firefox + 移动视口(viewport)上查看时，没问题。
- 当删除导入 Font-Awesome 的
script标签时，在 Chrome 上不再有任何问题。 font-awesome CSS CDN 也是造成这种情况的原因。
有两个列，因为一个用于固定笔记(首先显示)，另一个用于常规笔记。
问题
在带有移动视口(viewport)的 Chrome 上，页面宽度大于视口(viewport)，但在 Firefox 上则不然。我通过删除导入 Font-Awesome 的 script 标签来修复它，但我需要 font awesome 和它的图标。
最佳答案
我通过向 CSS 添加 .columns { margin-right:0px;margin-left:0px;} 来解决这个问题。参见 this bool 玛问题。
关于html - 导入 font-awesome 导致 Chrome Mobile 上的 x 轴溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53787671/