html - 为什么浏览器在不同的分辨率下会以不同的方式呈现居中对齐的文本?
问题描述
我的网站上有一个“通知铃”,里面有一个数字(你有多少通知)。该数字在中间直到大约 1200 像素,然后稍微向左(1 像素)。用 Photoshop 仔细观察,文本变小了 1 像素。这是如何发生的,为什么会发生?
在 Chrome 中测试。
编辑 4:所以这实际上只是一个渲染问题。CSS 什么都做不了。
编辑3:这变得越来越奇怪。我在删除浮动后添加了 display: inline-block ,但它又出错了。但是,删除 float: left 并删除与之配对的菜单选项会带来问题。哇... :(
编辑2:看来我找到了原因。这是我的菜单,菜单项有浮动:左。我去掉了左边的浮动(当然现在很乱),但数字正好到了中间。不知道为什么在较低的分辨率下不会发生这种情况。
编辑:添加截图!左边是较小的分辨率,“0”在中间,但在右边,分辨率较大,它向左1px。我知道它几乎看不见,但它让我烦恼。
一些html:
<span class="open_notifs main notif"><span class="item">0</span></span>
这里也有一些 CSS:
#cs_menu span {
position: relative;
display: inline-block;
outline: 0;
color: #FFF;
text-decoration: none;
letter-spacing: 1px;
text-shadow: 0 0 1px rgba(255,255,255,.3);
font-size: 14px;
cursor: pointer;
height: 35px;
line-height: 35px;
}
#cs_menu span.notif {
background: url(/images/notif-bell.png) no-repeat;
padding: 0;
margin: 0 4px;
}
#cs_menu span.item {
padding-left: 0;
padding-right: 0;
width: 30px;
text-align: center;
line-height: initial;
letter-spacing: 0px;
}
解决方案
我在您的html
and中看到了一些问题css
code
。你CSS
的被覆盖了很多次。span
tag
与 冲突CSS
code
。您可以替换通知icon
和text
之间div
和span
。我习惯flexbox
了fix
这个issue
。此外,您还没有code
为background image
.
HTML
<div class="notificaiton-icon">
<span>0<span>
</div>
CSS
.notificaiton-icon{
align-items: center;
background-attachment: scroll;
background-image: url(https://hearthstonehungary.hu//images/notif-bell.png);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
height: 36px;
justify-content: center;
width: 30px;
}
.notificaiton-icon span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 1;
}
这是钢笔。
注意:
element
此通知使用新鲜icon
,text
避免冲突css
覆盖问题。使用flexbox
它会帮助你center
vertically
和horizontally
。
推荐阅读
- r - 横杆未按顺序排列
- db2 - DB2 选择组匹配条件,然后进行聚合 listagg
- python - python中的正则表达式-如何理解这个不带括号的ip标签
- elasticsearch - 将 Elastic 搜索数据从 5.6.4 迁移到 6.6.0
- ios - Xamarin 表单:ios 应用程序启动屏幕中的应用程序徽标在 ipad 上未居中对齐
- android-studio - Android Studio 中的 SearchView 自动完成功能
- jenkins - Jenkins 中的 Pact 提供程序 jvm 内存不足错误
- groovy - 过滤groovy Map并删除冗余键
- git - git 告诉我在尝试签出到新分支时使用 --skip-worktree 提交或存储对排除文件的更改
- hive - spark dataframe saveAsTable 如何自动转换数据类型