是否有更快的方式在IE7中提供":before"和":after"选择器支持？

当然可以。在 Internet Explorer 7 中，不直接支持 ":before" 和 ":after" 伪元素，但您可以使用以下几种方法来提供支持：

使用 JavaScript 库：

a. jQuery：

  使用 jQuery 的 ".before()" 和 ".after()" 方法可以在 IE7 中实现类似的功能。例如：

  ```javascript

  $(selector).before(htmlString);

  $(selector).after(htmlString);

```

b. IE7.js：

  这是一个专门为 IE7 设计的 JavaScript 库，可以在 IE7 中添加对 ":before" 和 ":after" 伪元素的支持。只需将以下代码添加到 HTML 文档的 `<head>` 部分：

  ```html

  <!--[if lt IE 8]>

     <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>

  <![endif]-->

```

使用 CSS 类或 ID：

  您可以使用 CSS 类或 ID 将特定样式应用于需要添加 ":before" 或 ":after" 内容的元素。例如：

  ```css

  .my-element:before {

      content: "Hello, World!";

  .my-element:after {

      content: "How are you?";

```

  然后，在 HTML 中，将类名添加到需要添加伪元素内容的元素：

  ```html

  <div class="my-element">

      <!-- Your content here -->

  </div>

```

使用 HTML5 Shiv：

  对于不支持 ":before" 和 ":after" 伪元素的旧版浏览器，您可以使用 HTML5 Shiv 来解决此问题。将以下代码添加到 HTML 文档的 `<head>` 部分：

  ```html

  <!--[if lt IE 9]>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>

  <![endif]-->

```

通过使用这些方法，您可以在 IE7 中实现类似 ":before" 和 ":after" 伪元素的功能。但是，请注意，这些方法可能不适用于所有情况，因此在使用它们之前，请确保充分测试您的代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流 / 浮动 / 定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

浮动特性 ( 脱离标准流布局 ) : 浮动的元素会脱离标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;

前端之 CSS 知识点回顾

标签内的文字的颜色是red，优先级相等的时候与文件中样式定义的先后顺序有关，即是后面的覆盖前面的，与在class定义中的先后关系无关。

前端翻译：Activating Browser Modes with Doctype

一、前言　　　　　　　　　　　　　　　　　　　　　　　　由于本人英语能力有限，译本内容难免有误，望各位指正！本译文不含附录部分，请知悉。二、译文内容　　　　　　　　　　　　　　　　　　　　　　为了让用户正常访问遵循Web标准的网站和90年代后期的非标准网站，当前的浏览器都内置了多种引擎模式。本文将解释这些模式和它们触发的原理。本文概要（没耐性的同学看完这个就可以闪了！）本文结论：以<!DOCTYPE html>作为你们的HTML文档（http头的mime为text/http的

【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

我碰到的那些面试题html+css

http://www.sohu.com/a/330231789_120174705

【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )

为 .clearfix:before 和 .clearfix:after 并集选择器 , 设置如下样式 :

Web程序员们，你准备好迎接HTML5了吗？

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

css多浏览常见问题

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid

【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

额外标签法清除浮动 , 会新增很多无意义标签 , 使得 HTML 标签结构混乱 ;

网页设计中另人头疼的浏览器兼容问题

(第一版)知识点

WEB前端开发做什么？ PC端页面移动端页面解决用户体验问题必备条件是什么？ 1>会上网，会打字，懂得互联网是什么 2>兴趣 3>肯练习浏览器和服务器如何信息交互？通过浏览器如何查看请求

4种方案解决CSS浏览器兼容性问题

前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。

最流行的5个前端框架对比

本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是模块化的，允许你仅使用所需的组件，甚至可以混合使用来自不同框架的组件。

【CSS】357- 坚定地使用 CSS Custom Properties

自定义属性（Custom Properties）是一个很有魅力的 CSS 新特性，现代浏览器广泛支持。但是遇到那些不支持 CSS Custom Properties 的老掉牙浏览器我们该怎么办？等着这些浏览器死翘翘了再支持，还是使用预处理武装 CSS？又或者强硬起来，对它们一笑了之？

CSS 1.0~3.0选择器（上）

HTML5学堂：我们学过了最为基础的id，类名和标签名选择器，然后就一直用它们了吗？如果是这样，那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅，将CSS1.0版本至当前最新的3.0版本当中，存在的所有选择器讲解一遍，今天我们先来说说比较基础的选择器。通配符选择器基本语法 * { margin: 0; padding: 0; } HTML5学堂的一些提醒：对于初学者，在学习更多高级选择器之前，最先了解的选择器。星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为

【CSS】处理兼容性问题 | CSS Hack | IE

（1）IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。这种问题主要就是会把某些元素挤到了第二行。

js的DOM理解

try…catch try{}catch(e) {}finally{} Error.name的六种值对应的信息： 1. EvalError：eval()的使用与定义不一致 2. RangeError：数值越界 3. ReferenceError：非法或不能识别的引用数值 4. SyntaxError：发生语法解析错误 5. TypeError：操作数类型错误 6. URIError：URI处理函数使用不当复制代码 es5严格模式 “use strict” 不再兼容es3的一些不规则语法。使用全

CSS选择器低版本IE浏览器的兼容

CSS 后代选择器很好用，让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。

金三银四，那浏览器兼容你知多少？

它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法）语法：选择符{属性：属性值！important；}

坚定地使用 CSS Custom Properties

好久没译文，最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错，翻译出来给大家。现在 CSS 新特性层出不穷，比如 Flex，CSS Grid 等等，我们是不是也可以按照这个思路使用，而不是借助预处理工具呢？自定义属性（Custom Properties）是一个很有魅力的 CSS 新特性，现代浏览器广泛支持。但是遇到那些不支持 CSS Custom Properties 的老掉牙浏览器我们该怎么办？等着这些浏览器死翘翘了再支持，还是使用预处

CSS中常见的BUG调试

拥有布局的元素负责自身及其子元素的尺寸及定位，而没有布局的元素仅仅能依靠近期的祖先元素进行控制。

CSS的四种基本选择器和四种高级选择器[通俗易懂]

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

div+css布局时常见bug总结

本文总结了div+css布局时常见的IE6兼容性问题及解决方法，包括14个常见问题及相应的解决方法。

div+css布局时常见bug总结

综述：虽然说被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

解决css的ie浏览器各种兼容问题

在进行网站开发过程中，IE是另很多程序员头疼的一个浏览器，他的版本兼容性很难调整，尤其是IE6，IE7，IE8，IE9，IE10这几个版本的区别有很大。现在百度与谷歌都有了一行解决这种兼容性的代码了。我们先来看一下百度的。

前端开发面试题总结之——CSS3

div+css布局时常见bug总结

最全的CSS浏览器兼容整理

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且 DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

前端学习(9)~css学习(三)：样式表和选择器

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS的选择器

CSS基础选择器标签选择器就是用标签名来当做选择器。 1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2）不管这个标签藏的多深，都能够被选择上。 3）选择的是所有的，而不是某一个。所以是共性，而不是特性。 id选择器 #表示选择id 1 #lj1{ 2 font-size: 60px; 3 font-weight: bold; 4 color:black; 5 } 1）任何的标签都可以有

HTML和CSS

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

是否有更快的方式在IE7中提供":before"和":after"选择器支持？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐