Chrome 中的轻微 CSS 对齐问题答案

【问题标题】：Slight CSS Alignment issues in ChromeChrome 中的轻微 CSS 对齐问题
【发布时间】：2015-10-01 04:43:11
【问题描述】：

虽然我是 stack oveflow 的新手，但它一直是我获得答案的重要来源，而且我的工作在很大程度上取得了成功。在我的时代，我使用 GSAP（Greensock 动画平台）构建了很多 HTML 5 横幅广告，但现在我被这个让我抓狂的轻微 CSS 对齐问题难住了，我想了解为什么会这样发生在 Chrome 上，但不在 Firefox 上。

我有截图来更好地说明对齐问题：

https://dl.dropboxusercontent.com/u/38891777/Outbox/Frame1.jpg https://dl.dropboxusercontent.com/u/38891777/Outbox/Frame2.jpg

if (!window.console) {
  window.console = {};
}
if (!console.log) {
  console.log = function() {};
}
var clickArea = document.getElementById("clickArea");
try {
  clickArea.href = clickTAG;
} catch (e) {
  console.log("Tried to assign 'clickTAG', but failed, continuing with animation");
}
//Defining General Variables
var _transTime = 0.5; //Global transition time
var _delayTime = 3;
window.onload = function() {
  //ClickTag Functions
  container.onclick = function(e) {
    console.log("Mouse Click(" + this.id + ")");
    EB.clickthrough();
  };
  container.onmouseover = function(e) {
    console.log("Mouse Over(" + this.id + ")");
    TweenLite.to(CTA, 0.5, {
      className: "CTA_Button_On",
      overwrite: 0
    });
    TweenLite.to(CTA_Text, 0.5, {
      className: "CTA_Text_On Absolute-Center",
      overwrite: 0
    });
  };
  container.onmouseout = function(e) {
    console.log("Mouse Out(" + this.id + ")");
    TweenLite.to(CTA, 0.5, {
      className: "CTA_Button_Off",
      overwrite: 0
    });
    TweenLite.to(CTA_Text, 0.5, {
      className: "CTA_Text_Off Absolute-Center",
      overwrite: 0
    });
  };
  //Animation via GSAP
  execFrame1();

  function execFrame1() {
    console.log("execFrame1");
    TweenLite.set([Model_Year, Frame1], {
      visibility: "visible"
    });
    TweenLite.from(Jelly1_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.50
    });
    TweenLite.from(Model_Year, _transTime * 2, {
      left: "+=100%",
      delay: 0.75
    });
    TweenLite.from(Model1, _transTime * 2, {
      left: "+=100%",
      delay: 1.0
    });
    TweenLite.from(Copy1_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.0,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy1_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.25,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy1_3, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.5,
      ease: Quad.easeIn
    });
    TweenLite.to(Frame1, _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 5.25,
      ease: Quad.easeIn,
      onComplete: execFrame2
    });
  }

  function execFrame2() {
    console.log("execFrame2");
    TweenLite.set([Frame2], {
      visibility: "visible"
    });
    TweenLite.from(Jelly2_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.0
    });
    TweenLite.from(Model2, _transTime * 2, {
      left: "+=100%",
      delay: 0.5
    });
    TweenLite.from(Copy2_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.5,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy2_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.75,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy2_3, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.0,
      ease: Quad.easeIn
    });
    TweenLite.to(Frame2, _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 5,
      ease: Quad.easeIn,
      onComplete: execFrame3
    });
  }

  function execFrame3() {
    console.log("execFrame3");
    TweenLite.set([Frame3], {
      visibility: "visible"
    });
    TweenLite.from(Jelly3_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.0
    });
    TweenLite.to(Model_Year, _transTime * 2, {
      left: "-=20px",
      delay: 0.0
    });
    TweenLite.from(Model3, _transTime * 2, {
      left: "+=100%",
      delay: 0.5
    });
    TweenLite.from(Copy3_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.5,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy3_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.75,
      ease: Quad.easeIn
    });
    TweenLite.to([Model_Year, Frame3], _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 4.75,
      ease: Quad.easeIn,
      onComplete: execFrame4
    });
  }

  function execFrame4() {
      console.log("execFrame4");
      TweenLite.set([CTA, Frame4], {
        visibility: "visible"
      });
      TweenLite.to(Brand_Logo, _transTime * 2, {
        scale: 1,
        ease: Quad.easeInOut,
        delay: 0.0
      });
      TweenLite.from(Header2, _transTime * 2, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 0.25
      });
      TweenLite.from(Jelly1_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 1.25
      });
      TweenLite.from(Copy4_1, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 1.25,
        ease: Quad.easeIn
      });
      TweenLite.from(Jelly2_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 1.75
      });
      TweenLite.from(Copy4_2, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 1.75,
        ease: Quad.easeIn
      });
      TweenLite.from(Jelly3_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 2.25
      });
      TweenLite.from(Copy4_3, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 2.25,
        ease: Quad.easeIn
      });
      TweenLite.from(CTA, _transTime, {
        top: "+=50px",
        delay: 2.5,
        ease: Quad.easeOut
      });
    }
    //End Animation via GSAP
}

@charset "UTF-8";

/* CSS Document */

body {
  margin: 0;
}
#container {
  /*Outter most container that could be considered the "Stage"*/
  position: absolute;
  overflow: hidden;
  height: 600px;
  width: 160px;
  cursor: pointer;
}
#content {
  /*Foreground Container for Content*/
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 1px;
}
#Border {
  position: absolute;
  top: -1px;
  left: -1px;
  height: 598px;
  width: 158px;
  border: solid #000000 1px;
}
#Frame1,
#Frame2,
#Frame3,
#Frame4,
#Frame5 {
  position: absolute;
  height: 100%;
  width: 100%;
  visibility: hidden;
}
/*Utilities*/

.Absolute-Center {
  /*Centers this element within a div*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
}
sup,
sub {
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
  font-size: 60%;
}
sub {
  top: 0.5em;
}
/*CTA Elements*/

#CTA {
  position: absolute;
  top: 568px;
  left: 3px;
  height: 26px;
  width: 151px;
  cursor: pointer;
  visibility: hidden;
}
#CTA_Text {
  width: 100%;
  cursor: pointer;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 11px;
  text-align: center;
}
.CTA_Button_Off {
  background-color: #e79c0b;
  border: 1px solid #ffffff;
}
.CTA_Button_On {
  background-color: #FFFFFF;
  border: 1px solid #e79c0b;
}
.CTA_Text_Off {
  color: #FFFFFF;
}
.CTA_Text_On {
  color: #E79C0B;
}
/*Non-Copy Elements*/

#BG {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  background-image: url(../images/BG.jpg);
  background-repeat: no-repeat;
}
#Brand_Logo {
  position: absolute;
  left: 33px;
  top: 14px;
  width: 94px;
  height: 63px;
  background-image: url(../images/Brand_Logo.jpg);
  background-repeat: no-repeat;
}
#Header2 {
  position: absolute;
  top: 101px;
  font-size: 23px;
  line-height: 23px;
  width: 100%;
  text-align: center;
}
#Model_Year {
  position: absolute;
  top: 104px;
  visibility: hidden;
  font-size: 17px;
  text-align: center;
  width: 100%;
}
#Model1,
#Model2,
#Model3 {
  position: absolute;
  top: 123px;
  font-size: 23px;
  text-align: center;
  line-height: 23px;
  width: 100%;
}
.Jelly1 {
  position: absolute;
  background-repeat: no-repeat;
  width: 155px;
  height: 73px;
  background-image: url(../images/Jelly1.png);
}
.Jelly2 {
  position: absolute;
  background-repeat: no-repeat;
  width: 149px;
  height: 73px;
  background-image: url(../images/Jelly2.png);
}
.Jelly3 {
  position: absolute;
  background-repeat: no-repeat;
  width: 156px;
  height: 83px;
  background-image: url(../images/Jelly3.png);
}
#Jelly1_LG {
  left: 7px;
  top: 244px;
}
#Jelly2_LG {
  left: 6px;
  top: 241px;
}
#Jelly3_LG {
  left: 6px;
  top: 235px;
}
#Jelly1_SM,
#Jelly2_SM,
#Jelly3_SM {
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
#Jelly1_SM {
  left: 7px;
  top: 242px;
}
#Jelly2_SM {
  left: 5px;
  top: 345px;
}
#Jelly3_SM {
  left: 5px;
  top: 448px;
}
/* Copy Elements */

#Copy1,
#Copy2,
#Copy3 {
  position: absolute;
  line-height: 20px;
  top: 390px;
  width: 100%;
  text-align: center;
}
#Copy1_1 {
  font-size: 14px;
}
#Copy1_2 {
  font-size: 17px;
}
#Copy1_3 {
  font-size: 17px;
}
#Copy2_1 {
  font-size: 14px;
}
#Copy2_2 {
  font-size: 17px;
}
#Copy2_3 {
  font-size: 17px;
}
#Copy3_1 {
  font-size: 14px;
}
#Copy3_2 {
  font-size: 17px;
}
#Copy4_1,
#Copy4_2,
#Copy4_3 {
  position: absolute;
  top: 190px;
  font-size: 10px;
}
#Copy4_1 {
  top: 414px;
  width: 100%;
  text-align: center;
}
#Copy4_2 {
  top: 314px;
  width: 100%;
  text-align: center;
}
#Copy4_3 {
  top: 528px;
  width: 100%;
  text-align: center;
}
.light-text {
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
}
.heavy-text {
  font-family: "Arial Black", Gadget, sans-serif;
  display: inline-block;
}

<!doctype html>
<html>

<head>
  <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
  <meta charset="UTF-8">
  <title>All Out Clear Out - Closer</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <a id="clickArea" target="_blank">
    <div id="container">
      <!--Global or Static Elements (BG, Logos, etc)-->
      <div id="BG"></div>
      <div id="Brand_Logo"></div>
      <div id="Model_Year" class="light-text">2015</div>
      <div id="content">
        <!--Frame Contents-->
        <div id="Frame1">
          <div id="Model1" class="heavy-text">RAM 1500</div>
          <div id="Jelly1_LG" class="Jelly1"></div>
          <div id="Copy1">
            <div id="Copy1_1" class="light-text">CANADA’S</div>
            <br/>
            <div id="Copy1_2" class="heavy-text">MOST FUEL-
              <br/>EFFICIENT</div>
            <br/>
            <div id="Copy1_3" class="heavy-text">PICKUP
              <br/>EVER</div>
          </div>
        </div>
        <div id="Frame2">
          <div id="Model2" class="heavy-text">RAM
            <br/>HEAVY
            <br/>DUTY</div>
          <div id="Jelly2_LG" class="Jelly2"></div>
          <div id="Copy2">
            <div id="Copy2_1" class="light-text">CANADA’S</div>
            <br/>
            <div id="Copy2_2" class="heavy-text">BEST-SELLING
              <br/>LINE OF</div>
            <br/>
            <div id="Copy2_3" class="heavy-text">DIESEL
              <br/>PICKUPS</div>
          </div>
        </div>
        <div id="Frame3">
          <div id="Model3" class="heavy-text"><span style="position: absolute; top: -22px; left: 82px; font-size: 17px;" class="light-text">RAM</span> ProMaster City<sup>™</sup>
          </div>
          <div id="Jelly3_LG" class="Jelly3"></div>
          <div id="Copy3">
            <div id="Copy3_1" class="light-text">LOADED WITH</div>
            <br/>
            <div id="Copy3_2" class="heavy-text">BEST-IN-CLASS FEATURES</div>
          </div>
        </div>
        <div id="Frame4">
          <div id="Header2" class="heavy-text">EXCEED
            <br/>EVERY
            <br/>JOB
          </div>
          <div id="Jelly1_SM" class="Jelly1"></div>
          <div id="Jelly2_SM" class="Jelly2"></div>
          <div id="Jelly3_SM" class="Jelly3"></div>
          <div id="Copy4_1" class="heavy-text">1500</div>
          <div id="Copy4_2" class="heavy-text">Heavy Duty</div>
          <div id="Copy4_3" class="heavy-text">Promaster City<sup>™</sup>
          </div>
        </div>
        <!--CTA and Border-->
        <div id="CTA" class="CTA_Button_Off">
          <div id="CTA_Text" class="CTA_Text_Off Absolute-Center">BUILD &amp; PRICE ></div>
        </div>
        <div id="Border"></div>
        <!-- End Contents-->
      </div>
      <!-- End Container-->
    </div>
  </a>
  <!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
  <!--relative link to main.js-->
  <script src="js/main.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css google-chrome firefox

【解决方案1】：

好的，我发现了问题并解决了。

这样做的原因是因为我使用 Sublime Text 来编辑我的 HTML 文件，并且我还使用了一个名为 HTML-CSS-JS Prettify 的插件来“清理”我的代码。在这个清理过程中，它通过在<br/> 标签中添加回车和缩进标签来自动格式化我的代码。

不幸的是，这个插件的缩进存在缺陷，而不是多次执行“制表符”来缩进我的代码，它通过为每个“制表符”创建四个“空格”字符来模拟这一点。这些空格在 HTML 上只呈现为一个，但仍然搞乱了我的对齐方式。

如果其他人使用这个程序和这个插件（顺便说一句），我通过进入 HTML-CSS-JS Prettify 插件的首选项来解决这个问题，导航到 "unformatted" 我添加了 "br", "BR" 到末尾列表。

这基本上会忽略尝试使用那些愚蠢的( ) hack 缩进自动格式化任何<br/> 或<BR> 标签。

【讨论】：

是的，在 html 中添加空格或中断标签会导致意想不到的后果，这就是为什么我更喜欢使用 css（边距和填充）来管理间距而不是那些标签或空格。可能还想在 sublime 文本中使用 4 个空格而不是制表符选项，以便正确读取它
澄清一下，插件创建的是“空格”字符而不是制表符。我的意图是永远不会改变我的代码呈现的空白。我会将这个提交给插件的开发人员，希望他能想出一个解决方法。 :)
啊是的。这可能是因为在 JS 世界（尤其是 ST）中，开发人员使用空格而不是制表符很常见，在他的情况下，他将其视为 4 个空格，我认为 html -prettyfy 应该有一个选项来改变它最有可能

【解决方案2】：

如果您将四个空格而不是制表符视为错误/解决方法，那么为什么不将没有制表符的渲染页面（假设它们没有被替换）视为故障？

仅使用空格只是代码格式化的另一种方式，在我看来，不应与制表或像您所说的“制表符模拟”混淆。我认为“缩进”这个词更准确。

但是，用空格替换制表符不是错误。

【讨论】：