Html 通过express和webpack交付时，高度百分比和顶距呈现方式不同

我有一个React组件，当我通过webpack将其交付给客户端时，它没有正确呈现。然而，当通过jade快递时，它呈现正确。附件中的截图显示了问题所在-左侧：通过jade表达，右侧：通过webpack

通过jade（左屏幕）和webpack（右屏幕）快递时，容器的顶部距离（红线）和高度（蓝线）呈现不同：

不确定是否有帮助，但下面是相关的HTML和类片段。另外，添加webpack配置文件

HTML:

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.jsx'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

我使用语义ui作为基础，然后根据需要添加类。在这两种情况下，都通过模板中的

和

标记包含了必要的依赖项。（将来，我将使用webpack模块化依赖项，但现在，我将它们嵌入index.html）

此外，我还缩小了问题的范围。问题似乎在于我以百分比的形式指定div容器的顶部距离和高度。我不明白为什么它应该以一种方式工作，而不是以另一种方式

将单位更改为em/px/pt确实解决了问题，我会这样做

---

我仍然想理解为什么会发生这种情况。可能是因为我不能简明扼要地表达这个问题，我没有找到任何相关的答案。

你认为这可能与jade loader有关吗？我建议使用HTML模板来验证这一点。如果是这样的话，我们可以集中精力将问题提交给jade loader。此外，如果使用丑陋的css前缀可以在Webpack1中管理。最好也看看这一点。我在通过webpack提供服务时使用带有脚本标记的纯HTML。我还没用过翡翠装载机。我实际上已经从HTML模板转发到了webpack。它现在还在那里工作。可能与cssnano有关（由Web包中的css加载器使用）？感谢链接Manolo，但尽管我已经配置了css加载器，但我还没有在index.jsx中导入或需要任何css文件。

.my-grid-container {
  position: relative;
  top: 15%;
}

.my-container {
  background-color: #ffffff;
  width: auto;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
  border: solid 1px #ededed;
  height: 57px;
  font-family: HelveticaNeue-Thin;
  font-size: 36px;
  font-weight: 100;
  color: #4a4a4a;
  padding-top: 1%;
}

.my-container2 {
  margin-left: 5%;
  margin-bottom: 5%;
  margin-right: 5%;
  margin-top: 0%;
  padding: 5%;
  position: relative;
  height: 35%;
  text-align: center;
  display: block;
}

.my-container2-item {
  height: 85%;
  width: 90%;
  border-radius: 30px;
  background-color: #ffffff;
  border: solid 1px #979797;
  z-index: 0;
  position: absolute;
  left: 5%;
  top: 7.5%;
  overflow: auto;
}

.my-container2-item-content {
  width: 80%;
  height: 80%;
  background-color: #fafafa;
  position: absolute;
  top: 10%;
  left: 10%;
  font-family: HelveticaNeue-Thin;
  font-size: 36px;
  font-weight: 100;
  text-align: center;
  color: #4a4a4a;
  display: table-cell;
  vertical-align: middle;
}

var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.jsx'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};