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

Question

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

目前设置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;
    }
}

非常感谢

Answer 1

该回答引用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，以便在不同浏览器中显示一致。如果仍然有问题，请尝试添加其他浏览器前缀或更改相关属性的值。