Question

当我缩小或放大浏览器时，一些网页内容搞砸了。如何解决这个问题？

这是主页的CSS（第一个链接）

.footer-image{
position: relative;
width: 100%;
}

.homeheaderh1{
float: left;
font-weight: bold;
color: #d31716;
margin: -520px 0 0 100px;
/* display: initial; */
line-height: 1em;
}

.homeheaderh3{
font-weight: normal;
margin: -320px 0 0 100px;
position: absolute;
line-height: 1.20em;
}

.homeheaderbutton{
float: left;
margin: -220px 0 0 100px;
position: absolute;
}

.homeheaderp{
float: left;
margin: -60px 0 0 100px;
position: absolute;
font-weight: bold;
}

这里是第二个链接的CSS

padding-top: 10px;
margin: -550px 0 0 500px;
color: #FFF;
position: absolute;

margin: -450px 0 0 400px;
color: #FFF;
line-height: 0.10em;
position: absolute;
font-weight: 300;

这是网页内容混乱的网页。

http://bit.ly/1KJjaOZ

http://bit.ly/1KCVhJv

Answer 1

当我在浏览器中查看源代码时视图源：http://homecredit.ph/testEnvironment/products-promos/standard-loan/

第168行

说

<div style="width: 115.80%;">

通常我会避免将宽度设置为大于100％，因为这样，它及其所有内容都会继承该宽度，通常会导致内容不适合屏幕/容器。

由于CSS是内联的，而不是来自CSS样式表，因此修复起来可能比较棘手。你需要找出答案 - 这种风格的来源，也可能有用 - 为什么在那里？（通常我会修复一件事，只能打破10个。对于CMS主题来说尤其如此）但是，我会选择100％宽度（或者更少，例如边距也是如此）。如果它暂时破坏了东西，我会使用它，修复任何破坏的东西，因为否则你将分层修复（大部分可能是不必要的），最重要的是，因为例如，一个坏的修复，如115％宽度的容器。

就一般情况下的响应式CSS而言，请查看“媒体查询”和“最佳做法”，例如：＆＃39;移动优先＆＃39;。

放大和缩小时，Web内容搞砸了

1 个答案: