我有一些简单的JavaScript来实现样式更改:
sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;
这适用于最新版本的FF,Opera和IE,但在最新版本的Chrome和Safari上失败.
它会影响两个后代,这些后代恰好是兄弟姐妹.第一个兄弟更新,但第二个没有.第二个元素的子元素也具有焦点,并包含<a>标记,该标记在onclick属性中包含上述代码.
在Chrome"开发人员工具"窗口中,如果我轻推(例如取消选中并检查)任何元素的任何属性,则第二个兄弟会更新为正确的样式.
是否有一种解决方法可以轻松地以编程方式"轻推"WebKit做正确的事情？
Google Chrome和Opera存在渲染问题(为什么？=),代码如下:
<html>
<style>
#content {
width: 150px;
background: gray;
}
#sidebar {
position: fixed;
left: 200px;
background: gray;
}
</style>
<body>
<div id="sidebar">
<a href="#s1">Link #1</a><br/>
<a href="#s2">Link #2</a>
</div>
<div id="content">
<div id="s1">
<a href="#s1">Link #1 TARGET</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in …我有一些div在悬停时显示,然后被隐藏.但是,在Chrome(19.0.1084.56 m,Windows XP)中,当您取消悬停时,Chrome不会重绘它们,直到您执行滚动或调整窗口大小等操作.
我知道对我的CSS的某些修改将解决问题,例如删除positionor z-index和overflow属性,但我真的不想这样做 - JSfiddle从我需要它们的完整站点配对.
任何人都可以清楚地知道为什么Chrome中会出现这种重绘问题？有没有人有任何提示来修复它而不会搞乱我需要的CSS？