Question

请参阅此示例：http://jsfiddle.net/niaconis/5jgHj/

使用position: fixed可以打破position: relative父级的“b”框。

即使将-*-transform应用于其父级，是否可以对方框“d”执行相同操作？
如果是这样，怎么样？如果没有，为什么？是否有任何解决方法/ polyfill？

为了进一步说明，在我的实际使用中，position: relative元素通过javascript应用transform，因此我不能简单地删除它。具体来说，它是在Leaflet地图上实施平移的元素。

Answer 1

这是所有transform

的webkit问题reported here

来自this SO post的解决方法是创建另一种转换方法，并在使用媒体查询的webkit浏览器中应用它（其他方法取决于您打算应用的转换）

@media screen and (-webkit-min-device-pixel-ratio:0) {
     ... webkit version here ...
}

您可以使用javascript函数taken from this SO post执行相同的操作来检测浏览器并应用转换替换，如果它是Chrome，Safari或（在您的情况下）Firefox

// Returns [Browser, Version]
navigator.sayswho = (function(){
  var N= navigator.appName, ua= navigator.userAgent, tem;
  var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
  if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
  M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
  return M;
})();
if(navigator.sayswho[0] == "Chrome" || navigator.sayswho[0] == "Safari") {
    // Do webkit specific fix
}
if(navigator.sayswho[0] == "Firefox") {
    // Do Firefox specific fix here
}

然而，这两种方法都涉及以另一种方式创建变换（不使用变换）。很可能你必须使用javascript重新创建相同的效果并在这些情况下应用它，这远非理想

我建议您以另一种方式解决此问题，最有可能是删除position:fixed

是否有可能将具有转换的父元素中的定位元素断开？

1 个答案: