Aureliaリピーターは同じハードコーディングされたコンテンツとは異なるレンダリング

Question

私はCSSグリッドの例で作業しようとしています。しかし、Aureliaリピータで使用すると、ブラウザで奇妙に見えます。 私はすべてを単純なスタイルだけに分離しようとしましたが、同じ問題が残っていました。最初にそれはリピーターであり、次に私は以下のリピーターの正確な結果をハードにコーディングしました。どの順序で配置するかは関係ありません。

はこっちの例を作成しようとしました： https://gist.run/?id=0dbb9921dd8997e0ddbbeeba8bca9dd6

あなたのapp.jsに置く必要がある唯一のものがある：

app.html

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;"; 
    } 
} 

そして、あなたで：

<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> 

誰でも私が間違っていることを明確にすることはできますか？

EDIT

申し訳ありません。奇妙な挙動は、私のブラウザでは、4つの列の幅が、ハードコードされた4つの列の幅と同じではないということです。それは完全な長さではありません。

開発者ツールの外側のdivのOUTER HTMLをコピーしてapp.htmlに貼り付けると、エラーを再現できます。しかし、字下げや改行で正しく書式設定すると、自分の意見が正しく表示されます。

EXPLANATION

ファビオが彼のコメントで指摘しているように、それは違いであるホワイトスペースです。私が評価しているCSSグリッドはこれを考慮に入れて、このスタイルを追加します。margin-right:-.25em;あなたのdiv間に空白があることが予想されるためです。あなたはAndrewが提供するリンクでそれについて実際に読むことができます。

最も簡単な解決策は、margin-rightをオーバーライドしてゼロに設定したAureliaリピータでこれらのグリッド列を生成する場合にクラスを追加することです。

Answer 1

本当に興味深い問題があります:)
inline-block属性を持つdivを持つと、「原因不明」の原因となる問題があります。詳細はこちら（Why is there an unexplainable gap between these inline-block div elements?）をご覧ください。
これは間違いなく、aureliaテンプレートリポジトリ（https://github.com/aurelia/templating）で報告する価値があるかもしれないので、repeat.forバインディングをブラウザとまったく同じように動作させることができます。

あなたの質問に具体的に答えるには、2つの選択肢があります（「何か間違っていない」、心配しないでください）。
1. repeat.for構文を使用している小さなクラスのピクセルギャップを追加するクラスを、<div>に追加して、ブラウザの動作と同様にすることができます。
2.通常のブラウザ<div>のピクセルギャップは、以前にリンクされたスタックオーバーフローポストで説明したように削除できます。
3.このcommentのとおり、空白を削除するだけで、両方の状況で正常に動作するはずです。

これが役に立ちます。