Question

我正在尝试使用css网格的示例。但是当我将它与Aurelia转发器一起使用时，它会在浏览器中呈现奇数。我试图将所有东西都分成只有简单的样式，但仍然是同样的问题。首先它是转发器，然后我硬编码下面转发器的确切结果。请注意，放置它们的顺序无关紧要。

试图在这里创建一个例子： https://gist.run/?id=0dbb9921dd8997e0ddbbeeba8bca9dd6

您需要在app.js中添加的唯一内容是：

export class App {
  constructor() {
    this.styleString = "width:25%;display:inline-block;min-height:1px;vertical-align:top;padding-left:20px;margin-right:-.25em;box-sizing:border-box;";
  }
}

在app.html中：

<template>
  <div>
    <div repeat.for="i of 4" style="background:${i%2==0?'red':'green'};${styleString}">
      ${i}
    </div>
  </div>
  <div>
    <div style="background:red;${styleString}">
      0
    </div>
    <div style="background:green;${styleString}">
      1
    </div>
    <div style="background:red;${styleString}">
      2
    </div>
    <div style="background:green;${styleString}">
      3
    </div>
  </div>
</template>

任何人都可以澄清我做错了吗？

修改

对不起。奇怪的是，在我的浏览器中，四列的宽度不如我硬编码的四列宽。这不是全长。

如果我在开发人员工具中复制外部div的外部HTML并将其粘贴到我的app.html中，则能够重现错误。但是如果我在缩进和正确的换行方面正确地格式化它，它会在我看来正确地呈现。

说明

正如法比奥在评论中指出的那样，白色空间就是差异。我正在评估的css网格考虑到了这一点，并添加了这种样式margin-right:-.25em;，因为它期望你的div之间有空格。您实际上可以在Andrew提供的链接中阅读。

最简单的解决方案可能是添加一个类，如果我用Aurelia转发器生成这些网格列，它们会覆盖margin-right并将其设置为零。

Answer 1

你确实有一个有趣的问题:) 您的问题在于如何使用具有app.use(function(req, res, next) { res.sendFile("index.html"); })属性的div导致“无法解释的”问题。间隙。有关详细信息，请访问此处（Why is there an unexplainable gap between these inline-block div elements?）这绝对是一个有趣的情况，可能值得在aurelia模板回购（https://github.com/aurelia/templating）报告，以便他们可以使他们的inline-block绑定行为与浏览器完全一样。

要具体回答您的问题，您有两种选择（另外，您没有＆＃34;做错了什么＆＃34;不用担心）。
1.您可以向使用repeat.for语法添加小像素间距的<div>添加一个类，使其类似于浏览器的行为。
2.您可以删除常规浏览器repeat.for上的像素间隙，如之前链接的Stack Overflow帖子中所述。
3.根据这个comment，你也可以删除空格，它在两种情况下都可以正常工作。

希望这有帮助。

Aurelia转发器呈现与相同的硬编码内容不同

1 个答案: