li:在IOS浏览器上忽略css之前

zd287kbt  于 2023-03-24  发布在  iOS
关注(0)|答案(2)|浏览(146)

希望有人在这里已经看到过这一点。我有一个网站,要求我删除默认的项目符号,并取代他们在css中,在每一个浏览器和移动终端上,它显示的方式,我已经风格它除了IOS。
我在iphone6s上检查了safari和chrome,在列表中,我用一个白色的盒子替换了子弹,它把它变成了一个相当大的黑色渐变的盒子。
这是它在PC/Android上的外观-子弹是橙子的,这是所需的颜色

这是它在所有IOS移动的浏览器上的显示方式:

这是我在子弹上使用的css:

section.specificationsSection ul li:before {
        content: "\25AA";
        font-size: 37px;
        display: inline-block;
        width: auto;
        line-height: 15px;
        margin-left: -.8em;
        color: #f15822;
        margin-right: 8px;
        margin-top: 4px;
    }

我被难倒了,我四处看看有没有其他人看到这个,问了一些设计师和开发人员没有运气,任何帮助都是受欢迎的!谢谢。

wgeznvg7

wgeznvg71#

iOS可能会将“\25AA”实体替换为黑色方形表情符号?(参考:https://www.iemoji.com/view/emoji/521/symbols/black-small-square
我们也遇到了这个问题。我们切换到“\25FC”,它看起来类似于“\25AA”,避免了iOS上巨大的斜面外观。不过,我们只需要使用黑色。

wwwo4jvm

wwwo4jvm2#

我在使用“\25AA”时在移动的iOS设备上遇到了类似的问题,并能够通过将内容设置为空字符串然后将其样式化为方形来解决它:

li::before {
content: '';
background: red;
margin-right: 12px;
height: 6px;
width: 6px;
display: inline-block;
position: relative;
top: -5px;

}
显然,您的特定造型需求可能会有所不同。

相关问题