是否有更快的方式在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" 伪元素的功能。但是，请注意，这些方法可能不适用于所有情况，因此在使用它们之前，请确保充分测试您的代码。
相关·内容
我正在使用:after和:before css伪元素，它在IE8和所有现代浏览器中都工作得很好，但在IE7中却不能很好地工作。在IE7中是否有解决此问题的已知黑客方法
浏览 71提问于2010-11-15得票数 59
回答已采纳
我使用了两个类，如类:在和类之前:在IE7中，用于圆角目的的after，但在IE7中不起作用。你能帮帮我吗？
.round:before{backgourn:url(top-bg.png) no.repeat top left;}
.round:after{backgournd:url(btm-bg.png) no.repeat bottom left;}`
浏览 0提问于2012-07-09得票数 0
我的设计目前需要大量的:before和:after选择器。IE7不支持这些选择器，所以，在深入研究之后，我现在使用 ( IE8版本)。
虽然它确实可以工作，但有一个明显的滞后(大约15-20秒)。
有没有人能推荐一个更快的替代方案，这样我就可以在IE7中使用:before和:after伪元素选择器了？
浏览 1提问于2011-07-04得票数 5
回答已采纳
1回答
我发现下面的代码可以很好地运行在IE8、IE9和火狐上，但是不能很好地运行在IE7上，向上箭头不能显示，为什么？
CSS：
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
浏览 2提问于2013-10-12得票数 0
回答已采纳
2回答
内容未显示前的IE8
、、、
这是指向违规页面的链接：
我使用的表单构建器有一个限制。无法插入文本，除非它是文本框、输入框等的标签。IE9、Firefox、Safari和Chrome都能正确显示。IE7没有支持，而IE8有限制。
因此，我尝试使用:before伪选择器插入副本。对于IE8及以下版本，我使用的是谷歌的javascript。这适用于IE7，而不适用于IE8
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></s
浏览 2提问于2012-10-09得票数 1
回答已采纳
1回答
在中，您可以看到以下内容：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
和之间有什么区别：
*, *:before, *:after {
-webkit-box-sizing: border-b
浏览 1提问于2014-07-27得票数 2
我有一个由twitter引导3构建的网站，它可以在除IE7之外的所有浏览器上运行。
它不是读取伪类，如before:、after:和box-sizing: border-box。
无论如何，我可以让IE7阅读这段代码吗？
浏览 2提问于2014-01-10得票数 0
2回答
通用选择器*会影响伪元素如:before和:after吗？
让我举一个例子：
当这样做时：
* { box-sizing: border-box; }
.上面的声明不也自动包含/影响伪元素(如:before和:after )吗？
或者，为了影响像:before和:after这样的伪元素，必须声明这一点吗？
*, *:before, *:after { box-sizing: border-box; }
这有道理吗？
我一直只使用* { box-sizing: border-box; }，从来没有遇到过任何伪元素的问题。但是我看到很多教程在做*, *:before, *:after，但它们从未
浏览 4提问于2014-07-17得票数 26
回答已采纳
2回答
我正在使用下面的样式来动态显示我的HTML代码中的其他颜色，但这些样式在IE7和IE8中不起作用。这一切都是由上面的IE9完成的。我逐渐了解到这些风格与IE7 & 8不兼容。
你能展示一下CSS中的替代方法，这样它们就可以在IE7和更高版本中工作吗？
table.idclass tbody tr:nth-child(2n) td {
background-color: red;
}
table.idclass tbody tr:nth-child(2n+1) td {
background-color: blue;
}
table.idclass thead tr
浏览 20提问于2015-12-05得票数 0
目前，我使用的一个框架使用了经典的clearfix：
@mixin clearfix {
zoom: 1;
&::before,
&::after {
content: '';
display: table;
}
&::after {
clear: both;
}
}
我想知道，既然IE7不再受支持，那么放弃使用::before是否安全，这样我就可以清楚地修复可能也需要伪元素以达到装饰目的的元素。我的建议是将其转化为以下内容：
@mixin clearfi
浏览 8提问于2016-08-04得票数 1
是否可以在jQuery的.animate()函数中设置CSS的选择器:before和:after的动画？如果不是，那么最好的替代方案是什么？
浏览 0提问于2013-01-01得票数 2
回答已采纳
1回答
我目前正在进行一个项目，其中我使用了以下两个库：和
不幸的是，我不能在IE7和IE8中对:before和:after这样的伪元素应用CSS3 (渐变或边界半径)。
有谁知道我怎么才能做到这一点？
浏览 0提问于2012-08-01得票数 4
回答已采纳
1回答
我的问题真的很简单，我只是想做的是:hover，:after和:before，我想悬停和之后嵌入到相同的元素，检查我的css代码：
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
这里的元素在:before中有一个图标，我不能删除或修改，我也想有一个悬停效果在它上…
有没有办法解决这个问题，我的控制台没有显示悬停效果？
浏览 0提问于2013-06-04得票数 1
回答已采纳
6回答
既然IE7和IE8不支持伪元素的双冒号表示法(例如::after或::first-letter)，而且为了向后兼容，现代浏览器支持单冒号表示法(例如:after)，我应该只使用单冒号表示法吗?当IE8的市场份额下降到可以忽略的水平时，我应该在代码库中查找/替换吗？或者我应该将两者都包括在内：
.foo:after,
.foo::after { /*styles*/ }
如果我关心IE8用户(可怜的亲爱的们)，单独使用double似乎很愚蠢。
浏览 0提问于2012-04-17得票数 113
回答已采纳
最近，我遇到了一个问题，新火狐量子是如此恼人。它看起来像是IE6-9 css规则限制，如下所示：
前4,095之后的任何规则都会被忽略。
通过@import或，包含的任何样式表都会在前31之后被忽略。
@import语句嵌套4层或更深级别将被忽略。
我们正在使用触控笔@ extend来扩展类。其中一些类/ css属性有超过50个css选择器，在chrome (所有版本)、firefox (除了新的量程版本)和IE9+中一切都很好。在新的firefox量子版(版本57)中，所有的东西都被完全错过了。我们对IE8-7-6有这个问题，但我们并不关心IE。现在，我们在最新的fire
浏览 2提问于2017-11-25得票数 2
回答已采纳
5回答
将多个伪类应用于选择器的正确CSS语法是什么？我想在列表中除最后一项之外的每一项后插入"，“。我使用以下css：
ul.phone_numbers li:after {
content: ",";
}
ul.phone_numbers li:last-child:after {
content: "";
}
这在FF3，Chrome和Safari3上运行得很好。IE7不能工作，因为它不支持:after (正如预期的那样)。在IE8中，它在每个li后面加上一个逗号，包括最后一个li。这是IE8的问题还是我的语法不正确？如果它在IE8中不起
浏览 0提问于2009-01-29得票数 43
回答已采纳
1回答
css代码如下：
div.quote:before {
content: 'before';
}
div.quote:after {
content: 'after';
}
不幸的是，它不能与IE 6和7一起工作。我如何解决它？也许是用表情？
浏览 0提问于2012-02-25得票数 0
回答已采纳
.foo:before {
}
.foo:after {
}
结果：
<div class="foo">
:before
<div class="somecontent"></div>
:after
</div>
是否可以为.foo选择以下:before和:after
:before
<div class="foo">
</div>
:after
<div class="bar">
</div>
浏览 3提问于2015-07-21得票数 1
3回答
我正在使用伪类在我的列表中生成管道，它工作得很好，除了它们不会在IE7中呈现。代码看起来像这样：
.brandLinks a:after {
margin: 0 4px;
content: "|";
}
.brandLinks a:last-child:after {
content: " "
}
这只是IE7不能做的事情，还是我的代码不可靠？
浏览 3提问于2010-04-16得票数 3
回答已采纳
2回答
我正在尝试让它们在IE7中工作，但我遇到了问题。我下载了jQuery插件，并将其包含在标题中，如下所示：
<!--[if lte IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.pseudo.js"></script>
<![endif]-->
但它仍然不起作用。
以下是jQuery插件中的代码。
(function($){
var patterns
浏览 2提问于2012-08-21得票数 3
我无法理解内部和目标切入点指示符之间的不同。
请看下面的例子：
@Component
public interface Icamera {
public void snap() throws Exception;
}
@Component
class Camera implements Icamera {
public void snap() throws Exception {
System.out.println("SNAP!");
}
}
@Aspect
@Component
public class Logger {
浏览 1提问于2017-10-01得票数 0
我想为每个无序列表实现项目符号样式。我有that.And的精灵图像，我实现了它。我从下面的链接中获取了这个例子。
它工作得很好，除了在IE7中。我想在IE7 also.How中运行相同的教程，我可以实现它吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
浏览 0提问于2013-02-14得票数 0
回答已采纳
1回答
div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }
我的语法错误还是伪元素中的
浏览 2提问于2013-07-25得票数 9
回答已采纳
*, ::before, ::after {}
这个语法到底做了什么？
如果在::before和::after之前没有任何争议，那么在这种情况下，它们是否引用了*？还是::before和::after语法中没有前面的参数本身就在做一些特定的事情？
浏览 7提问于2022-11-25得票数 1
回答已采纳
<article>
<header targetme!>
<h1 don't target me></h1>
</header>
<p targetme! ></p>
<p targetme! ></p>
<div targetme!>
<p don't target me></p>
</div>
</article>
是否有一个CSS选择器(IE7和up)可以用来仅选择给定元素(在本例中为文
浏览 0提问于2012-09-21得票数 1
回答已采纳
2回答
指出：
只有在指定了!DOCTYPE时，IE7和IE8才支持属性选择器。
IE7和IE8不识别HTML5文档类型，对吗？
那么，如果我使用IE7文档类型，这是否意味着IE8和HTML5不会识别我的属性选择器？
浏览 2提问于2011-10-18得票数 1
在上，它说IE9不支持伪元素::before和::after，但当我尝试时，它似乎支持……请参阅
我做错了什么吗？我认为::before和::after会是对IE9隐藏东西的很好的工具，但实际上他们不是。
浏览 5提问于2011-08-23得票数 12
回答已采纳
我很难理解CSS :after属性的行为。根据规范(和)：
正如它们的名称所示，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。
这似乎并没有限制哪些元素可以具有:after (或:before)属性。然而，它似乎只适用于. <p>工作，<img>不工作，<input>不工作，<table>工作。我可以做更多的测试，但重点是。请注意，在不同的浏览器中，这似乎是非常一致的。什么决定一个对象是否可以接受一个:before :after 和:after属性？
浏览 1提问于2011-08-04得票数 109
回答已采纳
3回答
如果有的话，我正试图找到解决以下问题的方法。
让我们假设主引号是双面引号“(开始)和”(结束)。我们也可以说，第二个引号是一个单顶引号‘(开始)和’(结束)。
想一想引文中的引语是如何显示的。
当然，引用的标准是交替的，就像这样。
“双单”双单“双”
现在，在HTML中，您可以这样写：
<q>Double <q>single <q>double <q>single </q>double </q>single </q>double.</q>
但是不，如果不应用CSS规则，这是行不通的。我不会在
浏览 1提问于2012-11-18得票数 3
回答已采纳
我在ie7中定位按钮时遇到了一些问题。这不适用于html5文档类型吗？
input[type="button"] { color: red; }
仅限
input { color: red; }
工作，但这并不是真正的我所追求的。
谢谢
编辑:这是一个本地ie7问题。IE7模式在ie9中工作。
浏览 0提问于2012-05-13得票数 0
回答已采纳
1回答
这个问题的目的是调查是否有可能做以下事情：
.element:before {
content: 'before';
color: orange;
}
.element:after {
content: 'after';
color: green;
}
.element:after:hover + .element:before {
color: red;
}
<div class='element'> </div>
浏览 3提问于2017-06-13得票数 0
回答已采纳
当在IE7上检查输入收音机时，我在突出显示标签时遇到了问题。
代码非常简单，您可以在这里查看一下：
我需要让它不使用Javascript在IE7上工作。
HTML：
<ul>
<li>
<input id="yes" type="radio" name="name" title="yes" />
<label for="yes">Yes</label></li>
<li>
浏览 6提问于2012-08-29得票数 0
回答已采纳
默认情况下，IE7中是否支持任何CSS3属性？我的意思是，在IE7中是否有任何支持css 3的属性，我们可以在不使用Javascript的情况下使用。
浏览 0提问于2010-06-12得票数 0
回答已采纳
1回答
再一次，我在使用IE7时遇到了问题。
我也尝试在伪元素之前使用:after&：：，在我的条目的光标末尾添加一个箭头。它没有显示在代码中，但用户必须完全自由地设计箭头(大小、类型、颜色等)。
看到弹琴了
<div style=" "
id="progress"
class="progress">
<div unselectable="on" style="
浏览 1提问于2014-06-17得票数 0
回答已采纳
我正在尝试在list中使用:before和:after，但它不起作用。我确信这是一个简单的错误，但我不能指出它。
任何帮助都将不胜感激
请检查
<div class="org-chart">
<ul class="chart chart-prhead">
<li>
<span><a href="#">Dabba</a></span>
<ul class="chart-mgr">
<
浏览 0提问于2016-02-03得票数 65
回答已采纳
2回答
我喜欢Davids代码，但我想知道在< IE7中支持它的最好方法。我的第一个想法是使用一句话“如果有孩子就添加一个类”。然后，该类将链接到以类似方式定位的背景图像。
你的解决方案是什么？
这是Davids fiddle：
编辑:在< IE7：
.menu li > a:after { margin-left: 5px; content: '\25BA'; }
浏览 1提问于2012-10-21得票数 1
回答已采纳
在SCSS的嵌套组中，是否有可能向上移动一个级别并将修饰符类应用于父级以覆盖样式？
例如，我有以下SCSS，其中将图像添加到前/后类中。我需要更改不同.btn--样式上的图像。因此，从本质上讲，编译的CSS看起来有点像.btn--ghost .label:before, .btn--ghost .after {}。
这有更多的样式，但我刚刚为这个例子剥离了它，所以它不是一堵代码墙。
.btn--arrow {
.label {
&:before,
&:after {
background: url(..
浏览 1提问于2021-05-25得票数 1
4回答
我本打算使用Eric的CSS重置，但我无意中发现了一些跨浏览器的差异(比如input边距)。在此基础上，我提出了一个更激进的观点：
(这已经过时了。不要忘记在这个问题的末尾检查目前的修订版，并按你的意愿对它进行批评)
/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoratio
浏览 3提问于2011-07-31得票数 4
回答已采纳
最近，我在一个项目中注意到，::after伪元素没有在input元素之后添加任何内容：
input::after { content: "xxxxxxxxxx"; } // no "virtual last child" inserted into DOM "after" the input
(对“虚拟最后一个子”的引用来自MDN页)
当然，像div这样的元素将在“it和最后一个子"::after”之后插入到DOM中：
div:empty::after { content: "xxxxxxxxxx"; }
//In DO
浏览 7提问于2016-10-11得票数 3
回答已采纳
2回答
例如，我是否可以将所有<p>元素包装在<b>标记中，以便将<p>Hello</p>呈现为<b><p>Hello</p></b>
我试着像这样使用::before和::after：
p::before {
content: "<b>";
}
p::after {
content: "</b>";
}
但是标签被转义了。有什么办法可以做到吗？
浏览 6提问于2022-01-15得票数 0
回答已采纳
3回答
我有个关于IE7的问题
我想使我的表的每一列都有相同的宽度，不管它们有什么内容。
$("table").each(function(){
var column =0;
var totalWidth = $(this).width();
$('tr:nth-child(1) td',this).each(function(){
column ++;
})
var cellWidth = totalWidth / column;
$('
浏览 7提问于2013-08-23得票数 0
回答已采纳
2回答
我有困难，试图找出如何找到路径的“加载更多按钮”，在这个网站，我试图刮。
按钮html：
<a class="button" href="?gender=All&search=&page=1" title="Load more items"
rel="next">Load More</a>
"Load More" == $0
::after == 0$
浏览 2提问于2022-08-30得票数 0
回答已采纳
我读了Eric Meyer的CSS reset，看到了这个：
blockquote:before, blockquote:after,
q:before, q:after {
/* ? */ content: '';
/* ? */ content: none;
}
我假设一些浏览器支持content: ''和一些content: none，是这样的吗？哪种浏览器支持哪种浏览器？
浏览 0提问于2011-07-24得票数 32
回答已采纳
5回答
我想创建这样的按钮：
在现代浏览器中，使用内置框、阴影和过滤器来创建效果。
对于IE8，选择伪元素。
对于IE7，我使用包装在条件注释中的特殊标记。
演示： ()
/**
* Button w/o images
*/
html {
font-size: 62.5%;
}
body {
font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
}
/* layout */
.btn {
display: inline-block;
height: 28px;
bord
浏览 3提问于2012-05-01得票数 35
回答已采纳
2回答
这些伪元素已经把我绊倒了一段时间了，我对此有点困惑。
在本例中：
div::before {
content: "hi";
}
它在任何HTML之前注入hi。我明白了，你需要清除浮点数。
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: -1px
}
然而，在此：
.box-content::before {
display: in
浏览 1提问于2017-07-13得票数 2
回答已采纳
我使用自定义链接和可选的CSS类创建了推荐的这里自定义社交媒体图标菜单。
我的子主题footer.php目前有
'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' =>
浏览 0提问于2020-05-10得票数 0
回答已采纳
这可能不是一个传统的CSS问题，但显然是问题的原因。
无论如何--当我设置一个Codepen示例并输入以下规则时：
*,
::after,
::before {
box-sizing: border-box;
}
* {
display: flex;
}
它将此作为预览中的原始文本返回：
CodePen Demo*, ::after, ::before { box-sizing: border-box; } * { display: flex; }//# sourceURL=pen.js
现在，添加任何CSS和HTML都会像这样预览：
<div>Div</div
浏览 1提问于2020-11-17得票数 1
回答已采纳
我在我的页面页脚有一个导航栏，它已经设置好了，可以在所有东西中工作，当然，除了IE7。我使用:after伪元素在导航栏中的每个<li>后面放置了一个竖线"|“，但在IE7中，它没有显示出来。这不是什么大问题，也不是那么难看，但我似乎找不到任何东西来掩盖它或欺骗IE7使其工作。
浏览 0提问于2011-01-08得票数 3
回答已采纳
2回答
IE7和Google Chrome支持响应头"Content-Language“吗？我在我的应用程序中将其设置为页面请求的响应头。标题可以在ie8、ie9和FF4中识别，其中使用了以下css技巧：
h1:lang(en) { font-weight: bold; }
h1:lang(es) { font-weight: normal; color: #FF0000; }
然而，在IE7和chrome中，css并不适用于特定的元素。
浏览 3提问于2011-05-19得票数 0
回答已采纳
1回答
以下代码不起作用。我想要预定义在代码中的任何地方使用的:before和:after。
&:after, &:before{
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
.myclass:after{background-color:red;}
但是下面的代码可以工作：
.myclass:after{background-color:red;
content:""; display:block; width:100%; height
浏览 10提问于2016-09-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
