- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站上有一个“通知铃”,里面有一个数字(你有多少通知)。这个数字在中间直到大约 1200 像素,然后它稍微向左(1 像素)。
用 Photoshop 仔细观察,文字变小了 1px。这是怎么发生的,为什么会发生?
在 Chrome 中测试。
编辑 4:所以结果证明这真的只是一个渲染问题。 CSS 什么也做不了。
编辑 3:这越来越奇怪了。我在删除 float 后添加了 display: inline-block ,但它又出错了。然而,删除 float: left 并删除与之配对的菜单选项,将问题带回来。哇... :(
编辑 2:看来我找到了原因。这是我的菜单,菜单项有 float :左。我去掉了左边的 float (当然现在是一团糟),但数字正好在中间。不知道为什么在较低的分辨率下不会发生这种情况。
编辑:添加截图! 在左边,它是较小的分辨率,“0”在中间,但在右边,较大的分辨率是向左 1px。我知道它几乎不可见,但它让我很恼火。
一些html:
<span class="open_notifs main notif"><span class="item">0</span></span>
#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
中看到了一些问题和 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>
.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;
}
Note: use fresh
element
for this notificationicon
andtext
avoid to conflictcss
overwritten issue. Useflexbox
it will help you tocenter
vertically
andhorizontally
.
关于html - 为什么浏览器以不同的分辨率呈现居中对齐的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59733516/
我是一名优秀的程序员,十分优秀!