首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS元素之前和之后的CSS在Edge和IE11中不起作用

作者：的撒旦 | 来源：互联网 | 2023-01-05 18:34
如何解决《CSS元素之前和之后的CSS在Edge和IE11中不起作用》经验，为你挑选了1个好方法。

我有问题显示一个带有角度侧面的按钮,使用css:before和:after伪元素.它适用于Chrome和Firefox,但不适用于Edge和IE 11.可能会出现什么问题？

a { text-decoration: none }
.container { margin: 20px; }
.font-jos {
  font-family: Verdana;
}
.btn-ribbon {
  position: relative;
  display:inline-block;
  padding: 13px 11px;
  background-color: #b46b78;
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0;
  border: none;
  margin-left: 20px;
  text-transform: uppercase;
}
.btn-ribbon:before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    display: block;
    width: 0;
    height: 0;
    border-top: 22px solid #b46b78;
    border-bottom: 22px solid #b46b78;
    border-left: 10px solid #fff0;
    z-index: 1;
}
.btn-ribbon:after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    width: 0;
    height: 0;
    border-top: 22px solid #b46b78;
    border-bottom: 22px solid #b46b78;
    border-right: 10px solid #fff0;
    z-index: 1;
}

  Read more

https://codepen.io/nidus/pen/gXJYLg



1> SWC..：

您需要更改#fff0到rgba(255, 255, 255, 0)或transparent在你的CSS border-right: 10px solid transparent;和border-left: 10px solid transparent;.它不喜欢颜色的格式.

IE和Edge似乎不支持这种格式.

这是一个有效的例子:

a { text-decoration: none }
.container { margin: 20px; }
.font-jos {
  font-family: Verdana;
}
.btn-ribbon {
  position: relative;
  display:inline-block;
  padding: 13px 11px;
  background-color: #b46b78;
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0;
  border: none;
  margin-left: 20px;
  text-transform: uppercase;
}
.btn-ribbon:before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    display: block;
    width: 0;
    height: 0;
    border-top: 22px solid #b46b78;
    border-bottom: 22px solid #b46b78;
    border-left: 10px solid transparent;
    z-index: 1;
}
.btn-ribbon:after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    width: 0;
    height: 0;
    border-top: 22px solid #b46b78;
    border-bottom: 22px solid #b46b78;
    border-right: 10px solid transparent;
    z-index: 1;
}

  Read more

推荐阅读
  • format

    向QTextEdit拖放文件的方法及实现步骤

    向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • ip

    九度OnlineJudge之1002：Grading问题的解决方法

    本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]
  • import

    Go Cobra命令行工具入门教程

    Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中，如Kubernetes、Hugo和Github CLI等。通过使用Cobra，我们可以快速创建命令行工具，适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • import

    IOS开发之短信发送与拨打电话的方法详解

    IOS开发之短信发送与拨打电话的方法详解
    本文详细介绍了在IOS开发中实现短信发送和拨打电话的两种方式，一种是使用系统底层发送，虽然无法自定义短信内容和返回原应用，但是简单方便；另一种是使用第三方框架发送，需要导入MessageUI头文件，并遵守MFMessageComposeViewControllerDelegate协议，可以实现自定义短信内容和返回原应用的功能。 ... [详细]
  • select

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • bit

    P1651 塔 (动态规划) 的最大高度计算方法

    本文介绍了P1651题目的描述和要求，以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术，将问题转化为求解差值的问题，并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • bit

    Windows操作系统的版本介绍及特点

    本文介绍了Windows操作系统的版本及其特点，包括Windows 7系统的6个版本：Starter、Home Basic、Home Premium、Professional、Enterprise、Ultimate。Windows操作系统是微软公司研发的一套操作系统，具有人机操作性优异、支持的应用软件较多、对硬件支持良好等优点。Windows 7 Starter是功能最少的版本，缺乏Aero特效功能，没有64位支持，最初设计不能同时运行三个以上应用程序。 ... [详细]
  • format

    编写可保护的代码的重要性及优化方法

    本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ... [详细]
  • select

    Oracle存储过程写法小例子及已命名的异常

    本文介绍了Oracle存储过程的基本语法和写法示例，同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • select

    响应式页面的概述和实现方式

    本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]
  • post

    Postgresql备份和恢复的方法及命令行操作步骤

    Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份，pg_restore命令进行恢复，并设置-h localhost选项，可以完成数据的备份和恢复操作。此外，本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • import

    Spark实现高斯朴素贝叶斯模型的低配版

    本文介绍了使用Spark实现低配版高斯朴素贝叶斯模型的原因和原理。随着数据量的增大，单机上运行高斯朴素贝叶斯模型会变得很慢，因此考虑使用Spark来加速运行。然而，Spark的MLlib并没有实现高斯朴素贝叶斯模型，因此需要自己动手实现。文章还介绍了朴素贝叶斯的原理和公式，并对具有多个特征和类别的模型进行了讨论。最后，作者总结了实现低配版高斯朴素贝叶斯模型的步骤。 ... [详细]
  • ip

    使用圣杯布局模式实现网站首页的内容布局

    使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • import

    十大经典排序算法动图演示+Python实现

    十大经典排序算法动图演示+Python实现
    本文介绍了十大经典排序算法的原理、演示和Python实现。排序算法分为内部排序和外部排序，常见的内部排序算法有插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。文章还解释了时间复杂度和稳定性的概念，并提供了相关的名词解释。 ... [详细]
  • ip

    网页播放视频的三种实现方式

    本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]
author-avatar
的撒旦
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有