css - Dropcap - :first-letter pseudo class not working as expected in firefox-6ren

css - Dropcap - :first-letter pseudo class not working as expected in firefox

转载作者：太空宇宙更新时间：2023-11-03 21:06:03

我使用 :first-letter pseudo 类制作了一个 dropcap，它在 chrome、IE 和 edge 中工作正常，但在 firefox 中无法正常工作。

那是什么问题

问题是它的高度。

这是我的代码:

.dropcap:first-letter {
    font-size: 3em;
    float: left;
    margin-top: .15em;
    padding: 2px 20px;
    border-radius: 6px;
    margin-right: 15px;
    padding: 3px 22px;
}

.dropcap.dc-bg-primary:first-letter {
    background-color: #1a73e9;
    color: #fff;
}

<p class="dropcap dc-bg-primary">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

这里是codepen的链接

注意:我的 chrome 版本是 69.0.3497.100(正式版)(64 位)，我的 firefox 版本是 62.0.3(32 位)

最佳答案

直接以 Firefox 为目标

您可以像这样直接针对 Firox 并通过不同的样式解决问题。

@-moz-document url-prefix() {/*这里是样式*/>

.dropcap:first-letter {
    font-size: 3em;
    float: left;
    margin-top: .15em;
    padding: 2px 20px;
    border-radius: 6px;
    margin-right: 15px;
    padding: 3px 22px;
}
@-moz-document url-prefix() {
.dropcap:first-letter {
padding: 15px 20px;
}
}

.dropcap.dc-bg-primary:first-letter {
    background-color: #1a73e9;
    color: #fff;
}

<p class="dropcap dc-bg-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </p>

关于css - Dropcap - :first-letter pseudo class not working as expected in firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52679243/

文章推荐： c# - 将控件滚动到流布局面板的可见顶部

文章推荐： python - Odoo Cron 带有字段增量？

文章推荐： python - 我在 pygame 中的事件循环有问题

文章推荐： CSS 调用和声明类

reactjs - 顺风错误 : Expected a pseudo-class or pseudo-element
我已经为我的项目配置了 tailwindcss，但是在 npm run start 之后我得到了以下错误。 (node:7032) UnhandledPromiseRejectionWarning:错
创建 react 应用程序构建错误 "Expected a pseudo-class or pseudo-element."
我使用 create-react-app 创建了一个应用程序并且在尝试构建生产优化版本时遇到错误 yarn build : > yarn build help yarn run v1.9.4 $ re
reactjs - CSS :empty pseudo-selector combined with :after pseudo-element
我正在寻找一种将 :content 伪元素添加到空元素的方法，并遇到了 :empty CSS 伪选择器，它看起来像会达到我正在寻找的目的。基本上，我想添加一个通用消息，如“Nothing found”
jquery - 如何在 Font Awesome 中使用::after pseudo 而不是::before pseudo
Font Awesome 未提供 :after伪。是否可以使用 :after默认情况下而不是 :before伪？例如，如果我使用:facebook那么图标应该使用:after而不是 :before
html - 如何设置:disabled pseudo element/class on :before pseudo element
我想在禁用时更改切换按钮的颜色。我使用 :before fetaure of css 实现了这个切换。代码位于 https://jsfiddle.net/sachin8085/adm5t7rz/6/
javascript - FireFox warning "Unknown pseudo-class or pseudo-element ' hidden' ”不停地跑来跑去
我最近在 Firefox 中发现了一个警告 Warning: Unknown pseudo-class or pseudo-element 'hidden' 这是页面 http://eleven23.
haskell "pseudo-functor"
我有一个多项式 data Poly a = Poly [a] 我希望能够做类似 fmap (take 3) polynomial 的事情但我不能，因为 Poly不是真正的仿函数，因为 f我在 fmap
CSS :not pseudo class
我想将某种样式应用到一个元素的所有后代，除了一些。这是我正在尝试实现的示例:http://jsfiddle.net/f8FLe/ .root * :not(.nested) { color:
Haskell 的代数数据类型 : "pseudo-extend"
我正在学习 Haskell 中的代数 DT。我想做的是创建一个新的 ADT 来“扩展”现有的 ADT。我找不到如何表达我想要的东西，有人可以建议替代模式或建议解决方案。我希望它们是不同的类型，但复制和
javascript - 通过名称作为字符串访问 "pseudo-globals"
我现在正在通过将所有内容包含在一个函数中，将全局变量变成“伪全局变量”，从而从我的代码中删除大部分全局变量，这些全局变量都可以从该函数 block 内的任何地方访问。 (function(){ var
javascript - 高度动画隐藏:Before Pseudo Element
我正在尝试创建动画时间轴。当时间轴出现时，我正在使用滚动显示来触发动画。每个时间线条目都有一个左边框和一个伪元素 :before 与之关联。 :before 元素是一个标记每个时间线条目开始的点。当动
html - 动态 :After Pseudo-Element
我的大脑并没有完全围绕这个:我正在使用我的 h1 上的 :before 和 :after 伪元素>。我的 h1 有一个 100% 宽度。我希望 :after 是一个重复的背景图形，填充空白，后置文本
css - 添加一个ID到:before Pseudo Class
是否可以在 :before 伪类的内容中添加类或 ID？我知道这行不通，但是类似: #menu { height: 100px; width: 100px; } #menu:befor
pseudo-element - CSS 虚线阴影
假设我有一个带有下划线的跨度: Hello, I'm underlined text .underline { color: #444; font-size: 250%; display:
CSS 相邻选择器 + :after pseudo element
这个问题在这里已经有了答案: CSS selector with period in ID (3 个答案) 关闭 6 年前。
html - 垂直对齐 :after pseudo element
我正在尝试将 :after 伪元素移动到 div 的末尾，有点像页脚。 Some content here .box { height: 60vh; } .box:after {
html - :before and :after pseudo-elements? 的默认显示属性是什么
在您指定内容之后，:AFTER 和:BEFORE 伪元素的默认display: 属性是什么。是display: inline还是display: inline-block？无法在 default
html - 元素 + 元素无法访问 :before pseudo
我遇到这样一种情况，我有两个元素在 DOM(邻居)中处于同一级别。当我悬停在 DOM 中之前的元素时，我希望显示它下面的元素。我还想访问我正在显示的元素的子元素并显示其 :before 伪元素。 SC
css - :not pseudo class doesn't work
我有一个样式规则: .tabs li { border: 1px solid transparent; } .tabs li:not(:last-child):not(:nth-child(2
html - 为什么我不能覆盖现有的 :after and :before pseudo-elements?
我有两个相同的 CSS 规则，但一个没有覆盖另一个。我使用了 right 而不是 left 规则，但它不会覆盖 left 规则。另一方面 top 规则正在覆盖。我也使用了 !important 规则

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Dropcap - :first-letter pseudo class not working as expected in firefox

直接以 Firefox 为目标