Question

我得到了以下组件：

var Tile = React.createClass({
  render: function() {
    return (
      <div>
        { this.renderToolbar() }
        { this.renderBody() }
      </div>
    );
  },

  renderToolbar: function() {
    return (
      <div className="toolbar">
        { this.props.toolbar }
      </div>
    );
  },

  renderBody: function() {
    return (
      <div className="body">
        { this.renderHeader() }
        { this.renderContent() }
      </div>
    );
  },

  renderHeader: function() {
    return (
      <div className="header">
        <button>Bar</button>
      </div>
    );
  },

  renderContent: function() {
    return (
      <div className="content">
        { this.props.children }
      </div>
    );
  }
});

JS在这里小提示：https://jsfiddle.net/v0h1omx8/1/显示问题。只需在Chrome和Firefox中打开即可。

该组件的行为如下：

它可以显示标题
它可以显示工具栏
它显示了一些内容
根据工具栏的宽度动态调整内容的宽度

到目前为止一切顺利。在chrome中一切正常。但是，在Firefox中我嵌套组件时会遇到麻烦，并且还会使用它来渲染工具栏。然后，用于工具栏的组件将始终太窄。

你们有没有想过如何让firefox显示工具栏始终保持正确的宽度（意味着只需将元素拉伸到需要的宽度？）

非常感谢任何有关如何以不同方式解决此问题的帮助或提示。

Firefox中浮动的宽度错误

0 个答案: