在pushState之后的iOS8 Safari：nth-child（）选择器不起作用
编辑：我已将此错误报告给Apple，现已关闭，已在Beta iOS 9.0（13A4254v）上进行了测试，并且可以正常运行。
编辑以获得更好的解释：
我在网页中有一堆文章，所有文章都包裹在div（列）中。这些文章的类具有绝对位置，并且宽度和高度固定。
有一个按钮可以应用：-到包装器/列的translation3d-一个window.history.pushState
所有样式都正确地应用于所有文章，但是当我按下按钮并在pushState之后，所有/某些nth-
child（）样式都没有正确地应用（左，上和宽度）。如果我将：nth-child（）更改为：nth-of-
type（），则在pushState之后所有功能都可以正常工作。
当Safari浏览器确定在按下Click按钮并影响到translate3d元素（硬件加速）后，决定激活切换到阅读器模式的可能性时，问题似乎显而易见。
在使用iPad2，iPad3视网膜和4的Safari iOS8上会发生这种情况。在使用iPad
mini视网膜的情况下不会发生这种情况。使用iOS7及之前的版本均能正常工作，但使用iOS8则无法正常工作。
码：
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 1.0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#column {
-webkit-transition: 0.35s; transition: 0.35s;
-webkit-transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 10px;
left: 10px;
border: 1px solid Grey;
width: 300px;
height: 225px;
}
.moveColumn {
-webkit-transform: translate3d(200px, 0px, 0px) !important;
}
article {
position: absolute;
overflow: hidden;
}
article:nth-child(1) {
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: Red;
}
article:nth-child(2) {
left: 0px;
top: 305px;
width: 605px;
height: 300px;
background-color: Blue;
}
article:nth-child(3) {
left: 305px;
top: 0;
width: 300px;
height: 300px;
background-color: Green;
}
.button {
position: absolute;
left: 10px;
top: 250px;
background-color: Grey;
}
</style>
<script language="javascript">
var veces = 0;
function moveColumn() {
var column = document.querySelector('#column');
column.classList.toggle('moveColumn');
var obj = {};
obj.sectionId = "section";
window.history.pushState(obj, "TITLE", "/?vp=" + veces);
veces++;
}
</script>
</head>
<body>
<div id="column">
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu urna quam. Duis et pellentesque ipsum, vitae varius erat. Nullam fringilla libero id est aliquet gravida. Quisque efficitur, quam bibendum posuere auctor, turpis arcu pulvinar sapien, interdum iaculis purus metus id velit. In in lorem ac dolor feugiat luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra velit sed massa viverra consequat id eu tortor. Ut scelerisque massa ut leo rutrum blandit.
Maecenas sit amet facilisis nulla, nec convallis nunc. Ut gravida, erat eget eleifend viverra, elit lacus ultrices turpis, vitae molestie felis tellus ac eros. Integer semper vitae sapien sit amet placerat. Praesent in sodales massa. Aliquam erat volutpat. Etiam maximus massa a scelerisque cursus. Pellentesque facilisis enim nec diam viverra facilisis. Morbi non nibh nulla. Praesent erat urna, porta sit amet dui eu, porta pulvinar metus. Nam quam odio, laoreet in nisi in, porta efficitur purus. In fringilla magna ac accumsan commodo.</article>
</div>
<div class="button" onclick="javascript:moveColumn();"> Click me to move column</div>
</body>
</html>
你经历过类似的事情吗？
问题答案：
确实nth-child不适用于IOS8。
切换nth-of-type对我来说有用。
受到很好的支持https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-
type
就是说，如果您不想冒险，可以按照以下步骤检测IOS 8。
function isIOS8() {
if ("600.1.4" == $.browser.version || ~navigator.userAgent.indexOf('OS 8_') ){
return true;
}
return false;
}
var i=0,
$el = $('ul.poll');
if( isIOS8() ){
$el.find(' li:nth-of-type(' + (i + 1) + ')').text('my first Child');
}else{
$el.find('.choice:nth-child(' + (i + 1) + ')').text('my first Child');
}
-
问题内容： 我有一个元素列表，其样式如下： 输出代替 有谁知道如何使用CSS选择除最后一个元素以外的所有元素？ 您可以在此处查看选择器的定义 问题答案： 如果不是选择器有问题，则可以设置所有选择器并覆盖最后一个选择器 或者如果您可以使用之前，则不需要最后一个孩子
-
问题内容： 我检查这个选择器： 选择器不起作用？ 我在firefinder中检查了此内容，但没有返回任何内容（没有信息显示零元素） 然后检查： 并返回h3，所以选择器几乎是不错的选择，但是this（h3的文本为’a’）的文本出错。 问题答案： 不是 原本是CSS3选择器感谢TJCrowder的链接，但它没有做到，很可能是因为它的工作方式往往会导致严重的性能和过度选择问题。例如，如果元素匹配给定的字
-
问题内容： 除非不应该这样，但我似乎无法承认类选择器。 我在另一个div内说了4个div，所有的类和id都在上面。我需要选择具有该类的div的第一个实例。例如： 并且显然再次获得相同的效果，但它不会影响任何div。 现在，如果我要强制它与该div一起使用，我可以这样做： 碰巧它是#content中的第3个div，这毫无意义，因为我需要使用该类获取任何东西的第一个实例。 这是HTML的示例，我已经尝
-
问题内容： 我需要在CSS中使用属性选择器来更改不同颜色和图像上的链接，但是它不起作用。 我有这个HTML： 而这个CSS： 为什么背景不是红色的？ 问题答案： 在href后面使用$。这将使属性值匹配字符串的结尾。
-
问题内容： 我在使用这个特定的CSS选择器时遇到了麻烦，当我添加它时，它不希望工作。似乎可以与其他选择器的任何组合正常工作： 如果我删除了该部件，它就可以正常工作。即使我将选择器更改为它，也不会选择输入了文本的输入字段。这是坏了还是我只是不允许在选择器中使用？ 我唯一想到的是浏览器仍在说该元素为空，因为它没有子元素，每个元素只有一个“值”。选择器是否没有针对输入元素和常规元素的单独功能？但这似乎不
-
我有一个观点，我设置了一个选择器背景，应该达到触摸。它可以，但只在4.x上。在2.3上，它对触摸没有反应。有什么问题吗？布局如下: 这是background_selector.xml：