在Chrome浏览器轻微的CSS对齐问题
Slight CSS Alignment issues in Chrome
虽然我对堆栈溢出不熟悉，但它一直是我的一个很好的答案来源，而且我在工作中很大程度上是成功的。我用GSAP (Greensock动画平台)在我的时间里建立了相当多的HTML 5横幅广告，但现在我被这个非常轻微的CSS对齐问题所困扰，这让我发疯，我想了解为什么它发生在Chrome上，而不是在Firefox上。
我有屏幕截图来更好地说明对齐问题:
https://dl.dropboxusercontent.com/u/38891777/Outbox/Frame1.jpghttps://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 & 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>好的，我找到了问题并解决了。
这样做的原因是因为我使用Sublime Text来编辑我的HTML文件，我还使用一个名为HTML- css - js Prettify的插件来"清理"我的代码。在这个清理过程中，它通过在<br/>标签和缩进标签中添加回车符来自动格式化我的代码，这很棒。
不幸的是，这个插件有一个缺陷，它的缩进，而不是做"tab"一堆时间缩进我的代码，它模拟这通过创建四个"空格"字符每个"tab"。这些空格只在HTML上呈现为一个，但仍然扰乱了我的对齐。
如果有人使用这个程序和这个插件(这是伟大的顺便说一下)，我通过进入HTML-CSS-JS美化插件的首选项，导航到"unformatted"我添加，"br", "BR"到列表的末尾。
这将基本上忽略尝试自动格式化任何<br/>或<BR>标记与那些愚蠢的( ) hack缩进。
如果您认为四个空格而不是制表符是错误/解决方法，那么为什么不考虑没有制表符的渲染页面(假设它们没有被替换)是故障呢?
只使用空格只是代码格式化的另一种方式，在我看来，不应该与制表混淆，或者像你说的，"制表模拟"。我认为"缩进"这个词更准确。
但是，用空格替换制表符并不是错误。
相关文章：
- css中的按钮对齐
- 仅在 CSS 向上滚动(与顶部对齐）时修复了 CSS 中的布局位置
- 使用绝对css将图像与正在换行的文本对齐
- 如何对齐画布旁边的文本和按钮(WebGL+JavaScript+CSS）
- HTML 和 CSS 在所有屏幕尺寸上垂直对齐正文网站
- 如何在CSS中将文本相互对齐并使图像宽度为屏幕
- Css浮动:右100%高度，图像底部对齐
- 在 css 中对齐三个框
- CSS 元素不会正确对齐
- CSS - 动态创建的居中对齐下拉列表
- CSS:将三个按钮对齐成两行
- 元素忽略位置:修复了在 CSS 中对齐的问题
- CSS 不会对齐 DIV 中的文本
- JS，Rails，CSS - 将按钮与页面上其他内容的底部对齐
- 当标题长度不同时，如何使用css对齐html文本
- 在Chrome浏览器轻微的CSS对齐问题
- 站点地图在页脚CSS对齐/浮动li元素
- CSS对齐问题
- 使用css对齐输入标记
- Angular:为什么不;t CSS对齐工作与ng重复
