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条)

报告相同问题？

  • 如何解决不同浏览器的样式兼容性问题?
    2023-10-19 21:46
    bug丶小狼人的博客 在前端开发中，不断学习和更新技能，以跟上浏览器和Web标准的发展，是确保网站在各种浏览器中具有一致外观和行为的关键。采用渐进增强的策略，即首先确保基本内容和功能在所有浏览器中都能正常工作，然后再为支持...
  • 前端开发：HTML/CSS深入理解及常见面试考点剖析
    2025-03-25 11:46
    内容概要：本文档汇集了大量的前端面试题及其解答，涵盖HTML、CSS、浏览器兼容性等多个方面。内容详尽讨论了HTML标签的作用、浏览器的内核及其影响、Doctype和quirks模式的理解、布局方式的优劣对比、图片格式的选择...
  • CSS在不同浏览器的兼容性问题
    2012-03-12 20:49
    ### CSS在不同浏览器的兼容性问题详解 #### 1. 为什么会出现兼容性问题 浏览器兼容性问题，指的是由于不同的浏览器对于相同的CSS代码解析存在差异，导致网页在不同浏览器上呈现的效果不一致的现象。这种差异可能...
  • 前端开发浏览器工作原理详解：从URL输入到页面渲染的全流程解析及常见面试题汇总浏览器的工作原理
    2025-06-08 09:12
    内容概要：本文围绕浏览器常见面试题及答案，从浏览器组成、内核、渲染...其他说明：本文不仅有助于应对前端面试，还能为日常开发提供理论支持。建议读者结合实际开发经验，深入理解浏览器的工作机制，优化网页性能。
  • 前端面试题之Css相关题集.zip
    2024-06-21 09:25
    8. **CSS重置与 Normalize.css**：理解浏览器默认样式的影响，以及如何通过重置或Normalize.css来统一不同浏览器的渲染效果。 9. **BEM命名法**：Block Element Modifier是一种流行的CSS命名约定，用于提升CSS代码...
  • CSS-浏览器兼容实战.pdf
    2020-08-27 18:53
    本书分为基础篇和实战篇，旨在帮助开发者理解和应对CSS的跨浏览器兼容性挑战。 基础篇首先介绍了DIV+CSS的优势，这种布局方式使得表现和内容分离，提高了搜索引擎的索引效率，减少了代码量，加快了页面加载速度，...
  • Web-前端html+css从入门到精通 134. 浏览器内核与浏览器前缀.zip
    2022-05-23 10:53
    在Web开发领域，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页内容和样式的基石。...通过本课程的学习，你将能够更好地应对跨浏览器兼容性问题，从而提升网页在不同设备和平台上的用户体验。
  • 解决CSS浏览器兼容性问题的4种方案
    2020-11-21 16:05
    浏览器兼容性问题一直是前端开发中的一个痛点，尤其是在CSS领域，由于各浏览器厂商对CSS标准的实现存在差异，导致相同的代码在不同浏览器上呈现的效果各异。本文将探讨解决CSS浏览器兼容性问题的四种策略。 首先，...
  • CSS Hack 有关浏览器兼容方面
    2020-12-02 13:12
    总的来说，CSS Hack是应对浏览器兼容性问题的一种临时策略，但应谨慎使用，避免过度依赖。随着浏览器的更新和前端技术的进步，开发者应该逐步转向更稳定、更标准化的解决方案，以创建更加健壮和可维护的Web页面。
  • 浏览器兼容性问题：前端开发者必备的解决技巧
    2024-08-31 10:12
    几何心凉的博客 浏览器兼容性问题：前端开发者必备的解决技巧
  • 没有解决我的问题, 去提问

问题事件

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