Question

after reducing zoom percentage before zoom 25％缩放和100％缩放的两张图片。我试图实现这样的目标

我遇到的问题首先是我有一个标题，其中有导航栏，有四个东西回家，大约......当我将缩放百分比降低到25％。导航栏项目是走出div.it。

第二件事是当我减小缩放百分比时，图像无法正确渲染。它的大小正在减小。

我面临的第三个问题是header-cont（div）和center-cont（div）正在合并。我知道这是与保证金崩溃有关但我无法解决的问题。我是初学者，请帮助我。

示例：

    <div id="page">
<div id="header-cont">
          <div id="header">
            <div id="logo">
                <a href="index.html" ><img src="bingo.png" /></a> 
             </div>
            <ul id="navigation">
                    <li bgcolor="green">
                        Home                
                    </li>
                    <li>
                        About
                    </li>
                    <li>
                        Insurance
                    </li>
                    <li>
                       Contact Us
                    </li>

            </ul>
    </div>
  </div>

<div id="center-cont">
        <div id="center">
                <div id="content">
                 <h3>Travel Insurance</h3>
                </div>
        </div>
</div>

<div id="footer-cont">
        <div id="footer">

        </div>

</div>

<div id="end-cont">
        <div id="end">

        </div>

 </div>
</div>

的CSS：

body
{
    margin:0 auto;
}

#page
{
    height:2400px;
    margin:0 auto;
    width:1000px;
}
#header-cont
{
    position:fixed;
    width:inherit;
    z-index:1;
    padding-top:1px;
}
#header
{   
    position:relative;
    background-color:black;
    height:80px;
    background-image:url(header.png) repeat-x;
}
#logo
{
    position:relative;  
    margin-top:auto;
    margin-left:100px;
    float:left;
}
#navigation
{
    margin-left:150px;
    display:inline-block;
    list-style:none;
    color:white;    
}
#navigation li
{
    position:relative;  
    float:left;
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    margin:12px 30px
}
#center-cont
{
    position:relative;
    //padding:1px;
    //margin-top:20px;
    width:1000px;   
    //margin:0 auto;
}
#center
{
    height:800px;
    background-image:url(travel.png);
//  background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
//  background-size:cover;
    min-height:100%;
    min-height:100%;
}
#content
{
    z-index:10;
    color:blue;
}
#footer-cont
{
    //position:fixed;
    width:1000px;   
    top:250px;
    margin:0 auto;
}
#footer
{
    background-color:green;
    height:100px;
    //background-attachment:fixed;
}
      #end-cont
      {
    width:1000px;   
     // top:300px;
    margin:0 auto;
      }
        #end
      {
    background-attachment:fixed;
    background-image:url(health.jpg);
    background-repeat:no-repeat;
    height:800px;
      }

对于我糟糕的缩进，我感到非常抱歉。

Answer 1

只是几个问题。你正在使用浏览器进行缩放吗？如果是这样，为什么？如果是一个可访问性的情况，那么更好的做法是使用切换选项来增加某些元素的大小。使用浏览器进行缩放时，您将始终遇到问题，因为浏览器使用分数和舍入元素大小的方式。要么留出扩展空间，要么检查为什么你需要网站使用浏览器缩放功能。

背景附件：缩小时滚动无法正确呈现

1 个答案: