ZK645945 2023-04-21 14:14 采纳率: 100%
浏览 30
已结题

前端显示对其在不同浏览器中显示不相同

前端显示对其在不同浏览器中显示不相同
其中class="mark"的表现在chorme和firefox中的表现不一项,
(firefox表示正常,而chorme中位置偏上)

img

目前设置CSS应对不同浏览器为下,可否请教该修改哪里

<div class="store-hour-selector">
    <div class="store-hour-selector-label">
        <h3 id="style"></h3>
        <selec>
        <option value="">ー</option>
        </select>
    </div>
    <div class="store-hour-selector-label">
        <span class="mark"></span>
    </div>
    <div class="store-hour-selector-label">
        <h3 id="style"></h3>
        <select>
        <option value="">ー</option>
        </select>
    </div>
    <div class="store-hour-selector-label">
        <h3 id="style"></h3>
        <select>
        <option value="">ー</option>
        </select>
    </div>
</div>

div.store-hour-selector-label .mark:before {
    content: '~';
    font-size: 24px;
    line-height: 0;
    position: absolute;
    bottom: 33px;
}

@-moz-document url-prefix() {
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@supports (-ms-ime-align:auto) {
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@supports (-ms-accelerator : true) {
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@media screen\0, screen\9 {
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@media (min-width: 1024px){
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

@media (min-width: 768px){
    div.store-hour-selector-label .mark:before {
        bottom: 23px;
    }
}

非常感谢

  • 写回答

1条回答 默认 最新

  • 守时间的孤岛 2023-04-21 14:30
    关注

    该回答引用chatgpt:
    您好,根据您提供的代码和描述,可能是因为不同浏览器的默认样式不同导致的。您可以尝试在样式中添加以下内容,以覆盖不同浏览器的默认样式:

    
    div.store-hour-selector-label .mark {
        display: inline-block;
        position: relative;
    }
    
    div.store-hour-selector-label .mark:before {
        content: '~';
        font-size: 24px;
        line-height: 0;
        position: absolute;
        bottom: 0;
    }
    
    

    这里将 bottom 属性的值设置为 0,以便在不同浏览器中显示一致。如果仍然有问题,请尝试添加其他浏览器前缀或更改相关属性的值。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月21日
  • 已采纳回答 4月21日
  • 修改了问题 4月21日
  • 修改了问题 4月21日
  • 展开全部

悬赏问题

  • ¥20 关于线性结构的问题:希望能从头到尾完整地帮我改一下,困扰我很久了
  • ¥30 3D多模态医疗数据集-视觉问答
  • ¥20 设计一个二极管稳压值检测电路
  • ¥15 内网办公电脑进行向日葵
  • ¥15 如何输入双曲线的参数a然后画出双曲线?我输入处理函数加上后就没有用了,不知道怎么回事去掉后双曲线可以画出来
  • ¥50 WPF Lidgren.Network.Core2连接问题
  • ¥15 soildworks装配体的尺寸问题
  • ¥100 有偿寻云闪付SDK转URL技术
  • ¥30 基于信创PC发布的QT应用如何跨用户启动后输入中文
  • ¥20 非root手机,如何精准控制手机流量消耗的大小,如20M