Question

这个简单的9页HTML网站多年来一直被用作多个网站的模板。它不是为了这个目的而建的，而是我正在处理的事情。整个站点需要大修，没有响应等等。如果仔细观察代码，页面和横幅图像的宽度属性会有多个矛盾。有一个长期计划来建立一个新的计划。在短期内，它给我带来了一个令人生气的怪癖，我一直无法解决。

横幅图像会根据需要显示在桌面版网站和机器人上。在iPhone和iPad上，横幅在9页中的7页上显示。在两个页面上，图像延伸到屏幕边缘之外。相同的规则应用于各个页面上的每个图像，并且HTML看起来是相同的。这些照片的尺寸和分辨率都相同。

为什么两个页面会有所不同？我知道代码中有错误但是不会对每个图像应用相同的错误吗？我在代码中看不到会影响一个页面的任何内容与其他页面不同。

我已经尝试了宽度，最大宽度，自动，百分比大小，像素大小和视图屏幕大小的所有变体。没有人创造一致性。前两页的图像总是与以下7页不同。我还通过验证器运行代码，每个页面上都有完全相同的错误，这些错误与图像大小无关。

<!DOCTYPE html>
<html class="no-js"><!-- InstanceBegin template="/Templates/oneclub_17.dwt"       codeOutsideHTMLIsLocked="false" -->
<script src="https://use.typekit.net/doa5ucf.js"></script>
<script>try[{Typekit.load({ async: true });}catch(e){}</script>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script     src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>BOKF ONE Club 2017-Welcome</title>
    <!-- InstanceEndEditable -->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/main.css">
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <!-- InstanceParam name="Banner Image" type="URL" value="Images/banner_bokf_hmb17_welcome.jpg" -->
</head>
<body>
    <div id="header">

        <div id="header-top">
            <div class="container">
                <div class="header-content">
                    <div id="nav">
                        <ul>
                            <li><a href="index.html">WELCOME</a></li>
                            <li><a href="destination.html">DESTINATION</a></li>
                            <li><a href="hotel.html">HOTEL</a></li>
                             <li><a href="agenda.html">AGENDA</a></li>
                           <li><a href="activities.html">ACTIVITIES</a></li>
                           <li><a href="climate.html">CLIMATE</a></li>
                           <li><a href="questions.html">Q&amp;A</a></li>
                            <li><a href="contact.html">CONTACT US</a></li>
                            <li><a href="register.html">REGISTER</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="banner-container">
        <img src="Images/banner_bokf_hmb17_welcome.jpg" width="1460">       </div>

    <div class="container">
      <div id="photo-caption"><!-- InstanceBeginEditable name="Caption" -->Ritz-Carlton Half Moon Bay<!-- InstanceEndEditable --></div>
      <div id="main-container">
        <div id="content"><!-- InstanceBeginEditable name="Body" -->
          <h1>Welcome</h1>
            <p>Only 30 minutes south of San Francisco is a dramatic stretch of California coastline. Here, craggy and windswept bluffs tumble onto shores pounded by endless surf to postcard-worthy perfection. This is Half Moon Bay where we will celebrate our elite’s 2016 achievements as ONE Club, March 30–April 2, 2017.</p>
        <!-- InstanceEndEditable --></div>
      </div>
    <div id="footer">
        <p>Copyright &copy; Wyndham Jade, LLC. All rights reserved.</p>
    </div>

    </div>
<script defer src="js/main.js"></script>
</body>

.container{
width: 1280px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0;
padding-left: 25px;
}
#header{
background-color: white;
height: auto;
}
#header-top{
position: fixed;
top: 0;
width: 100%;
background-color: #FFFFFF;
height: 50px;
line-height: 50px;
z-index: 2;
}
    #header-top .container{
        padding: 0;
    }
    .header-content{
        text-transform:uppercase;
        color: #ffffff;
        font-size:12px;
    }


#nav {
position: relative;
height: 50px;
background-image: url(../Images/oneclub_weblogo_2017.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-top: 0px;
}
#nav ul {
position: absolute;
right: 0;
margin:0;
padding:0;
list-style:none;
line-height: 12px;
margin-top: 27px;
}
#nav li {
margin:0;
padding:0;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}


#home-banner {
text-align: center;
}

.banner-container{
height: 480px;
margin-top: 50px;
position: relative;
background-color: #FFF;
}
.banner-container img {
display: block;
width: 1460px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}
.banner-container img land {
display: block;
width: 1460px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 480px;
}

#main-container {
width: 1280px;
}

Answer 1

我注意到了一些事情。首先，您应该删除<img src="Images/banner_bokf_hmb17_welcome.jpg" width="1460">上的宽度约束，因为它是在CSS中处理的。此外，在CSS中，.banner-container img land未在任何地方定义，并且可能导致您将看不到的错误。

您是否也尝试在任何浏览器中使用可用的开发人员选项（使用F12激活）。此外，对于不起作用的页面，可能有一个旧的缓存CSS文件正在破坏结果。你还想在iOS上clear the cached data for the pages giving you trouble。这应该对最新的CSS值进行全新的提取，并希望以正确的方式显示。

然而，我确实感谢9页中的7页工作#startrek

就未来的工作而言......我建议使用Bootstrap CSS或something similar ......

Answer 2

这将有助于查看两个在bin或小提琴中以不同方式显示的页面的比较。

我在代码和CSS示例中注意到的一些可能会破坏宽度的事情。

具有固定宽度的嵌套元素
使用display：block
标题中的链接溢出到右侧，导致水平滚动

为了帮助您获得更一致的结果，请尝试使用可变宽度并使用max-width样式属性。在固定宽度元素中包含填充时，请使用box sizing以避免不必要的水平滚动问题。 Box大小可以直接解决您的问题。

Here is a jsbin with close to your original markup and CSS

Same page with variable width (width: 100%) and max-width set. 还删除了几个嵌套元素上的左/右填充，并减小了标题容器的宽度以防止溢出。

#header-top {
 position: fixed;
 top: 0;
 width: 98%;
}

为什么简单HTML网站中的横幅图片会有不同尺寸的不同网页？

2 个答案: