Chrome中的轻微CSS对齐问题

时间：2015-09-30 15:43:22

标签： javascript html css google-chrome firefox

虽然我是新手，但对于我来说，它一直是一个很好的答案来源，而且我的工作在很大程度上取得了成功。在我的时代，我使用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>

2 个答案:

答案 0 :(得分：1)

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

原因是因为我使用Sublime Text来编辑我的HTML文件，而且我还使用一个名为HTML-CSS-JS Prettify的插件来“清理”我的代码。在此清理过程中，它会自动格式化我的代码，方法是将回车添加到"unformatted"标签并缩进标签，这很棒。

不幸的是，这个插件有一个缺陷，它的缩进而不是多次用“tab”来缩进我的代码，它通过为每个“tab”创建四个“space”字符来模拟这个。这些空格在HTML上只呈现为一个空格，但是我的对齐方式也没有那么混乱。

如果有其他人使用这个程序和这个插件（这很棒btw）我通过进入HTML-CSS-JS Prettify插件的首选项，导航到"br", "BR"我添加了<br/>来解决这个问题。列表的末尾。

这基本上会忽略尝试使用那些愚蠢的<BR>黑客缩进自动格式化任何( )或plot(l[[i]],k[[i]]) 标记。

答案 1 :(得分：0)

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

仅使用空格只是代码格式化的另一种方式，在我看来，不应该与制表混淆，或者像你说的那样，“制表模拟”。我认为单词'缩进'更准确。

但是，用空格替换tab不是一个错误。

相关问题
最新问题