相关疑难解决方法(0)
当浏览器调整为较小的窗口时,网站在页面右侧有奇怪的空白
我已经尝试了所有我能想到的东西,但似乎没有什么可以解决这个问题.当我以全屏(在我的计算机上)查看网站时,它显得很好,但是当我将浏览器调整到较小的窗口时,所有网站内容右侧都会出现一个非常奇怪的空白区域.由于某些元素设置为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> …推荐指数
解决办法
查看次数
网站身体背景在iPhone Safari中呈现正确的白色边缘
我在这个网站上有一个渲染错误,我在其他任何地方都没见过.该网站在所有现代浏览器中呈现并验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的截图).我正在使用Yahoo CSS重置,并在身体中声明背景图像,如下所示:
background: url("back.jpg") #033049;
您也可以访问网站:http://xaviesteve.com/
如果我应该提供更多细节,请告诉我.任何帮助/提示表示赞赏,谢谢.
编辑
我发现很少有人在互联网上报告这个问题:
另一个问题:当背景图像应该延伸到页面的整个长度时,页面右侧会显示空白区域建议应用
overflow-x:hidden但它会裁剪网站.在iPad论坛:http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html没有回复
解
我一直在研究并尝试不同的方法来解决这个问题,并发现将背景图像添加到<html>标签中可以解决问题.希望这可以节省一些时间给其他开发者.
之前
body {background:url('images/back.jpg');}
后
html, body {background:url('images/back.jpg');}
推荐指数
解决办法
查看次数
如何以及在哪里访问 gatsby 中的 html 正文
我遇到了网页右侧和底部出现大空白的问题。测试网页的响应能力时。
我在stackoverflow上发现了类似的问题
两个帖子的解决方案都是一样的
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
我不知道在哪里添加这个gatsby，我发现了一个与我的问题类似的帖子，关于gatsby 如何设计主体/背景的样式？。似乎不明白这个问题的解决方案是什么！
找到这篇文章How to add adynamic class to body tag in Gatsby.js? 对使用有一些想法react-helmet，我到底可以如何使用它？
谁能解释我如何html body在盖茨比中设置，以避免这个大的空白？
Resolution 1366x768边框下方的区域是空白区域
Resolution 1920x1080边框下方的区域是空白区域
推荐指数
解决办法
查看次数
引导移动菜单按钮在手机上离开屏幕
我有一个本地开发的 Bootstrap 站点，如果您调整浏览器窗口的大小，导航栏可以在桌面上的每个大小（低至 320 像素宽）下完美运行。但是，如果您使用浏览器的设备模拟，或查看实际手机上的页面，“汉堡包”菜单按钮会向右移出屏幕，您必须向右滚动才能看到它。我整个下午都在谷歌上搜索和调整我能想到的每一种风格，没有任何改变。我希望其他人遇到过这个问题。
三个注意事项：(1) 一些菜单样式（特别是左侧定位）可能看起来/很奇怪，但需要将菜单在屏幕上保持在非常窄的宽度。删除该定位无济于事。(2) 我有一个拆分标题，我在其中为左右指定 XS-6 - 从技术上讲，我认为所有行都应该是移动 XS 大小的完整 12 列宽度，但再次......改变这个根本没有改变问题——它只是在第二行离开了屏幕。(3) 这是一个 wordpress 站点，我使用的是 wp_bootstrap_navwalker。
这是我的 HTML 和 CSS... 建议？
.container{width:auto;}
.navbar-default .navbar-toggle {border-color:#4B4F5B;padding:5px;margin-top:23px;margin-right:10px;}
.navbar-default .navbar-toggle .icon-bar{background-color:#4B4F5B;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color:#fff;}
.navbar-collapse {border-top:1px dotted #4B4F5B;position:relative;left:-10px;}
.navbar-collapse.in {overflow-y: visible;} /*show overflow to avoid submenu scrolling*/
#menu-menu1 {position:relative;left:-35px;}
.dropdown-menu {position:relative;left:-70px;}
#header_left {margin:0;padding:0;}
#header_right {margin:0;padding:0;} <!-- HEADER / NAV -->
<header class="row navrow">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- LEFT SIDE -->
<div class="col-xs-8 …推荐指数
解决办法
查看次数
标签 统计
css ×3
html ×2
button ×1
gatsby ×1
iphone ×1
javascript ×1
mobile ×1
react-helmet ×1
wordpress ×1
xhtml ×1