weixin_58648225 2023-03-30 19:01 采纳率: 89.2%
浏览 52
已结题

css应对不同浏览器的表示不同

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

img

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

<div class="store-hour-selector">
                    <div class="store-hour-selector-label">
                      <h3 id="style"></h3>
                      <select>
                        <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 {
    display: flex;
    flex-direction: row;
}
div.store-hour-selector-label {
    display: inline-flex;
    flex: 1;
    padding-right: 6px;
    position: relative;
    width: 100%;
    flex-direction: column;
}
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;
    }
}

非常感谢~ !

  • 写回答

2条回答 默认 最新

  • CSDN专家-文盲老顾 2023-03-30 19:37
    关注

    缺少 store-hour-selector 样式内容，无法帮你调试

    我默认你 store-hour-selector 样式为 display:flex

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  div.store-hour-selector-label .mark:before {
    content: '~';
    font-size: 24px;
    line-height: 0;
   
    
    
}

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

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

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

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

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

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

@media (min-width: 768px){
    div.store-hour-selector-label .mark:before {
    }
}
.store-hour-selector-label {min-width:20px;min-height:20px;position:relative;}
.store-hour-selector {display:flex;align-items:center;}
h3{padding:0px;margin:0px;}
  </style>
 </head>
 <body>
  <div class="store-hour-selector">
                    <div class="store-hour-selector-label">
                      <h3 id="style"></h3>
                      <select>
                        <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>
 </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 修改了问题 3月30日
  • 修改了问题 3月30日
  • 展开全部

悬赏问题

  • ¥15 使用yolov5-7.0目标检测报错
  • ¥15 对于这个问题的解释说明
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备