使用指令时仅限Chrome布局问题

Question

摘要

在处理基于角度的单页应用程序（Ushahidi＆＃39; s v3前端）时，我们偶然发现了以下问题。 它只出现在Chrome中，而不是Firefox中（现在不能对其他浏览器说些什么）。

问题是当我们将html移动到指令（场景2）时，元素（在我们的例子中：登录按钮）没有正确定位，而在主页面内直接使用HTMl时它看起来像预期的那样模板（方案1）。

整个页面的呈现HTML在两种情况下都是相同的。

重现两种情况

您可以通过以下步骤在大约3分钟内轻松重现这两种方案（首先让应用程序运行，然后描述如何查看这两种方案）：

快速应用设置

• 只需要为工作状态和非工作状态执行一次
  • 先决条件
  • 已安装node / npm
  • 安装了gulp和napa
    • (sudo) npm install -g gulp napa
  • git clone https://github.com/spaudanjo/platform-client.git
  • cd platform-client
  • git fetch origin fix_T1107_chrome_layout_bug:fix_T1107_chrome_layout_bug
  • git checkout fix_T1107_chrome_layout_bug
  • (sudo) npm install
  • bower install
  • napa install
  • gulp --node-server --mock-backend
  • 使用http://localhost:8080
  打开Chrome

工作状态（方案1，不使用指令）

• git checkout ca99fdeb4613265063c0f481588c2e34ecd109ed
• 刷新Chrome
• 确保右上角的菜单看起来像预期的那样（“登录”按钮与“＃34;创建＆＃34;和＆＃34;工作区＆＃34;在同一行;”

不工作状态（方案2，使用指令）

• git checkout 5fe22a68aea3c8cbf1497dc2c3c7f3d83ab822f3
• 刷新Chrome
• 确保您能够识别布局问题（“登录”按钮放置不正确;请参阅随附的屏幕截图）

更改了文件

• 为了轻松查看受影响的文件，以下是提交的差异，它将指令HTML再次移回主模板：
  • https://github.com/spaudanjo/platform-client/commit/ca99fdeb4613265063c0f481588c2e34ecd109ed

任何提示/想法？