我们的网页背景图片在FireFox以及iPad/iPhone上的iOS中存在问题,页面右侧显示空白区域.
背景图片在其他浏览器上可以很好地扩展,但我们很难在这些浏览器上扩展浏览器的全长.
快来看看我们的火狐网站,看看我的意思.
我已经尝试了所有我能想到的东西,但似乎没有什么可以解决这个问题.当我以全屏(在我的计算机上)查看网站时,它显得很好,但是当我将浏览器调整到较小的窗口时,所有网站内容右侧都会出现一个非常奇怪的空白区域.由于某些元素设置为100%宽度,我似乎无法弄清楚为什么这个空白区域会覆盖这些元素.
HTML:
<body>
<div id="bar">
<div id="linkarea">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="explore.php">Explore</a></li>
<li><a href="newtopic.php">New Debate</a></li>
<li><a href="contact.php">Contact</a></li>
</div>
</div><div id="sky">
<div id="cloud"></div>
<div id="cloud2"></div>
<div id="cloud3"></div>
<div id="cloud4"></div>
<div id="cloud5"></div>
<div id="cloud6"></div>
<div id="cloud7"></div>
<div id="cloud8"></div>
</div>
<div id="contenttop"></div><div id="container">
<img src="images/cloud0.png" id="cloud0" alt="TelUsY" />
<img src="images/logo1.png" id="logo" />
<img src="images/plane.png" id="plane" alt="TelUsY" />
<div id="userinfob">
<span id="logintext">
<form name="loginform" id="loginform" method="POST" action="/beta/index.php">
<input type="text" class="styled_login" name="access_login" id="loginface" value="username...">
<input type="password" class="styled_login" name="access_password" id="pwface">
<a class="button" id="loginbutton" href="#"><span>Login!</span></a></span> …显然,这不是一件容易的事,html.js因为默认情况下模板文件中唯一改变的是头元标记和内容.
元标记由Helmet组件({head.title.toComponent()}和{head.meta.toComponent()})处理,模板内的HTML更改由React管理.(<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)
然而,body标签超出了React的范围,这就是为什么当我从一个页面导航到另一个页面时,我无法弄清楚如何即时更改它.这正是我需要的,因为我想为每个页面应用不同的身体背景.
我知道我可以通过使用exports.onRouteUpdatein 来解决这个问题gatsby-browser.js,但是我希望即使在浏览器中禁用了JS,该类仍然存在.意味着即使我没有bundle.js文件导出,只是生成静态网站HTML,我希望它在那里.