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