2010-12-01 85 views
1

如果有人能帮忙,我会非常感激!布局弹性问题

我使用ems构建了一个弹性网站,出于某种原因,当用户放大或缩小浏览器时,它仍然完全失真。

我指的网站的链接是www.newstylesignsusa.com.这里是模板的CSS。其余页面的css也具有ems中的所有度量。 我真的很感谢任何帮助,我可以用这个。谢谢!

CSS:

body{ 
    margin:0 auto; 
    padding:0em; 
    background: url(images/bg_gradient_bar.jpg) repeat-x top left #99cccc; 
    font-size:16px 
} 


.clear{ 
    clear:both; 
} 

html{ 
    font-size:100%; 
} 

/*=============== 
simple selectors 
====================*/ 

p{ 
    font-family:Arial, Helvetica, sans-serif; 
    color:white; 
    float:right; 
    margin-top:-0.625em; 
    margin-right:0.75em; 
    padding:0em; 
    font-size:1.125em; 
} 

img{ 
    margin-top:-1.875em; 
} 

ul{ 
    margin-top:0em; 
    margin-right:0.6em; 
    list-style-type:none; 
    float:left; 
    background: url(images/nav_bar.gif) repeat-x top left; 
    font-size:1.135em; 
} 

ul li{ 
    padding-top:0em; 
    padding-bottom:0em; 
    padding-left:3.268em; 
    padding-right:3.308em; 
    float:left; 
    position:relative; 
    text-align:center; 
    border-right:0.125em solid orange; 
    line-height:2.73em; 
} 

ul a{ 
    padding:1.25em 0em; 
    line height:2.813em; 
    margin:0em; 
    text-decoration:none; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    color:#003366; 
} 

ul a:hover{ 
    color:#ff6600; 
} 

ul li ul{ 
    display:none; 
    font-size:1em; 
    padding:0em; 
    margin:0em; 
    z-index:100; 
    position:absolute; 
} 

ul li ul li{ 
    border:none; 
    font-size:0.779em; 
    background: url(images/nav_bar.gif) no-repeat top left; 
    width:6.695em; 
    margin-bottom:-0.625em; 
    position:relative; 
    z-index:100; 
} 

ul li:hover ul{ 
    display:block; 
    position:absolute; 
    top:2.70em; 
    left:0em; 
} 

h3{ 
    color:#003366; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 

} 

h4{ 
    color:#003366; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    font-size:0.938em; 
    font-weight:normal; 
} 

span{ 
    background: url(images/nav_bar.gif) repeat-x top left; 
    margin-left:0.375em; 
    color:#003366; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    padding:0.938em 20.725em 5.625em 21.25em; 
    border-top:0.75em solid #66cccc; 
} 

/*=================== 
specific selectors 
=====================*/ 

#mainWrapper{ 
    width:62.5em; 
    margin-left: auto; 
    margin-right:auto; 
    margin-bottom:12.5em; 
    zoom:1; 
} 

#bgWrapper{ 
    background: url(images/skyline.gif) repeat-x bottom center; 
    position:fixed; 
    bottom:0em; 
    padding-top:-12.5em; 
    height: 7.3em; 
    width:100%; 
    z-index:2; 
} 

#allContent{ 
    margin-top:4.688em; 
    margin-right:0.0em; 
    margin-left:0.0em; 
    padding-right:-0.9em; 
    padding-left:0.5em; 
} 

#nav { 
    margin-top:2em; 
    margin-left:-0.2em; 
} 

#contact { 
    border:none; 
} 

#info{ 
    background:white; 
    border-top:0.75em solid #003366; 
    border-bottom:0.125em solid yellow; 
    margin-top:-1.25em; 
    margin-left:0.375em; 
    margin-right:1.188em; 
    padding-bottom:1.25em; 
} 

#flash { 
    margin-top:0.625em; 
    margin-right:8.5em; 
    margin-bottom:3.125em; 
    margin-left:11.9em; 
    z-index:0; 
    top:0em; 
    left:0.625em; 
    param-name:wmode; 
    value:transparent; 
} 

#bottomContent { 
    border-top:0.375em solid #003366; 
    background:white; 
    margin-top:-2.625em; 
    margin-right:0.875em; 
    margin-left:0.875em; 
} 

#about { 
    float:left; 
    width:28.125em; 
    border-right:0.188em solid #003366; 
    padding-right:0.563em; 
    padding-bottom:1.6em; 
    margin-top:0.688em; 
    margin-left:0.313em; 
} 

#from { 
    float:right; 
    width:28.125em; 
    margin-top:2.05em; 
} 

.aboutPara{ 
    color:#003366; 
    text-align:justify; 
    font-size:1.063em; 
    margin-top:0.013em; 
} 

.fromPara{ 
    color:#003366; 
    font-weight:bold; 
    text-align:justify; 
    padding-bottom:0.625em; 
} 

.one{ 
    background: url(images/star_icon.gif) no-repeat bottom left; 
    padding-top:0.65em; 
    padding-bottom:0.438em; 
    padding-left:3.188em; 
} 

.two{ 
    background: url(images/check_icon.gif) no-repeat bottom left; 
    padding-top:0.65em; 
    padding-bottom:0.438em; 
    padding-left:3.188em; 
} 

.three{ 
    background: url(images/arrow_icon.gif) no-repeat bottom left; 
    padding-top:0.65em; 
    padding-bottom:0.438em; 
    padding-left:3.188em; 
} 

.four{ 
    background: url(images/globe_icon.gif) no-repeat bottom left; 
    padding-top:0.65em;/*0.25*/ 
    padding-bottom:0.438em; 
    padding-left:3.188em;/*2.188*/ 
} 

#footer{ 
    margin-right:-0.95em; 
    margin-left:-0.1em; 
    padding-right:0.5em; 
} 

回答

0

弹性布局让浏览器来调整基于相对于页面的基本字体大小的元素的宽度。

您看到的问题是您使用的是浏览器缩放,而不仅仅是文本缩放,这是当用户放大页面时导致您的网站中断的原因。

当我在Chrome中对您的网站进行文字缩放时,唯一能够将它缩小的不是缩放。

希望这会有所帮助