d3.js 内联块元素在 Firefox 和 IE 中失败

Question

我试图将一个小 d3.js 动画与单独的图像结合起来，但无法跨浏览器运行。我的代码在 Chrome 和 Safari 中运行正常，但在 Firefox 或 Internet Explorer 中运行不正常。在 FF 中，它们不是内联的。对于 IE，我遵循 this tip - 它们确实内联渲染，但差距很大。

非常感谢您的帮助。这是 jsfiddle of the model。由于这是一个 css 问题，我认为只有前 2 个 javascript 链可能相关 - 其余的是动画。

<!DOCTYPE html>
<html>
<head>
  <title>In-line problem</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .img {-webkit-backface-visibility: hidden;}
    #container .logoElement{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 400;
    }
  </style>
</head>
<body>
  <span id="container">
    <div id="d3div" class="logoElement"></div>
    <div id="imagediv" class="logoElement"></div>
  </span>

  <script>
  // right-side (static) image element
  d3.select("#imagediv").append("img")
        .attr("src", "https://cdn.tutsplus.com/mobile/uploads/legacy/Free-App-Marketing-Tips/city-landscape.png")
        .style("max-width", "200px")
        .attr("class", "logoElement");

  // left-side  (dynamic) d3 element
  var g = d3.select("#d3div").append("svg")
      .attr("class", "logoElement")
      .style("height", 110)
      .style("width", 180)
      .append("g")
        .attr("transform", "scale(1.1)");

  // I THINK BELOW CAN BE IGNORED

    var start = Date.now(),
    speed = .02;

  // initialise dynamic animation elements
  var big = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 100).attr("height", 100)
    .attr("x", -50).attr("y", -50);

  var small = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 50).attr("height", 50)
    .attr("x", -25).attr("y", -25);

  // animate
  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(50,50)," + "rotate(" + angle/2 + ")"; };
    big.selectAll("frame").attr("transform", transform);
    big.attr("transform", transform);
  });

  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(124,50)," + "rotate(" + -angle + ")"; };
    small.selectAll("frame").attr("transform", transform);
    small.attr("transform", transform);
  });
  </script>
</body>
</html>

Answer 1

您在 .logoElement 的宽度声明中忘记了一个单位。

同时为容器设置一个 white-space: nowrap;，只是为了确保元素始终并排对齐，没有换行符

示例fiddle：http://jsfiddle.net/xm3fLyxz/6/

Answer 2

Demo

#container .logoElement{
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 200px; /* You forgot to add 'px', to show it in one line I reduced the width */
}

d3.js 内联块元素在 Firefox 和 IE 中失败

d3.js inline-block elements are failing in Firefox and IE

css

d3.js

cross-browser

inline