Question

我试图为移动浏览器制作一个特殊形状的标题我在我的电脑上得到了我想要的东西：之前和之后得到三角形的形状。虽然它在PC浏览器中看起来很棒..到目前为止，只有我的三星Galaxy s2和s4上的chrome浏览器才能产生预期的效果。甚至三星的标准浏览器都失败了我也在iphone s4上进行了测试，在safari和chrome上都没有成功。

在我对这些伪选择器的支持上找到的所有页面上，他们说每个浏览器都有支持，但我的测试说不然。

我的问题是，有没有支持或我的代码错了？

这是一个指向包含我设置的代码的简单页面的链接。 http://foodlogg.net76.net/pseudo.html

*{
  margin: 0px;
  padding: 0px;
}
.top {
  background-color:#e50000;
  height:20px;
  width: 93vw;
  text-align: left;
  padding: 5px 0px;
}
.top:before {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 93vw solid #e50000;
  position: absolute;
  left: 0px;
  top: 30px;
}
.top:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 7vw solid #e50000;
  position: absolute;
  right: 0px;
  top: 0px;
}

希望你们能帮助我。

Answer 1

此问题与伪元素无关。

关于使用vw的CSS3相对大小调整。您的伪元素具有相当于vw中给出的样式部分的宽度或边框宽度。这就是移动浏览器陷入困境的原因。

Android（就像在你的星系上一样）从4.4以上支持这个。

Answer 2

您可以尝试以下操作：在类display: table-cell和.top:after中添加arrtibute .top:before。我认为它是成功的。

：之后和：之前不在移动浏览器上工作

2 个答案: