chrome 设置div高度无效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chrome 设置div高度无效相关的知识，希望对你有一定的参考价值。
<div style="height=30%;width=100%;border:1px solid red;">
<div style="height=10%;width=30%;border:1px solid red;margin-right:10px;">
</div>
<div style="height=10%;width=30%;border:1px solid blue;">
</div>
</div>
测试者段代码，在chrome中div高度为0，在ie中正常，请问chrome中应该怎么解决没有内容的时候，高度为0的情况？
每个浏览器内核不同，在没加入dtd 的时候 ie有自己的渲染方式，所以会造成一定的错误，加入下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
放在html网页的最上面 参考技术B chrome 是个败家的产品，
==只对 table、tr、td 支持良好。 参考技术C DIV属于块级元素
当没有设置width和height的时候，是没有效果的，你可以加上background试试就知道了！本回答被提问者和网友采纳
chrome中的jScrollPane 2.0高度问题
【中文标题】chrome中的jScrollPane 2.0高度问题【英文标题】：jScrollPane 2.0 height problem in chrome 【发布时间】：2011-04-18 18:00:31 【问题描述】：我在绝对定位的 div 中使用具有类滚动窗格（高度 100%）的 div。滚动窗格 div 首先包含一些文本，然后是图像，然后是一些文本。图像高度设置为 200 像素。 问题是！如果我在 Chrome（最新版本）中查看滚动窗格，有时我可以滚动完整内容，有时在浏览器中刷新站点后，不能滚动。不意味着我只能看到第二个文本的一部分，而不是更多。所以实际的滚动高度会缩小。如果我再次刷新，我可能会再次看到它全部完成，依此类推。每次我刷新浏览器时它都会改变。它只发生在 Chrome 中。
知道我可以做些什么来避免这种行为吗？谢谢.....
更新 它确实与导入（js 和 css）在标题中的排列方式有关。你是对的，css 必须在 jscrollPane js 之前导入，但这也意味着图像高度需要来自 css 样式表之一。您不能在标记中的图像标签内定义高度。我的解决方案是在我的样式表中创建一个类，即 img200（代表 200px 的高度），这就是诀窍。 所以这里再次需要做些什么才能使其在 Chrome 或更好的 webkit 浏览器中正常工作： 在样式表中为滚动窗格中使用的图像设置图像高度类。 之前包含你的样式表！！！！！！ jScrollPane 的 javascript。 将特殊高度类添加到您包含到 jScrollPane 的所有图片 就是这样。再次感谢您的快速答复。很酷。
最终解决方案更新！！！！！！！！！ 如果您在 jScrollPane 区域中有图片，您必须确保以下内容才能在 webkit 浏览器（如 Chrome 或 Safari）中正常显示。否则会导致高度问题，只有部分内容可见。这是你必须做的： 确保您的 css 样式表和 jScrollPane javascript 文件的排列是正确的。 jScrollPane javascript 文件需要遵循您的 css 样式表，而不是相反！您还必须为 jScrollPane 区域中包含的每个图像添加一个高度。您可以通过创建一个 css 类来做到这一点，也可以将维度作为属性直接添加到 html 标记中的 img 中。如果你牢记这一点，它就会成功。
【问题讨论】：
非常感谢！这正是我一直在寻找的！很好的答案！它困扰了我很长时间。只是永远不要抓住问题。 “图像”样式... :|好吧，我现在要制作一个 jQuery 来获取任何图像的所有样式，并将它们分别添加到每个 img 'style' 属性中。曹 【参考方案1】：您是否也在 Safari 中进行过测试？当 javascript 包含在文档头部的 CSS 之前，这听起来像是 Webkit 中出现的问题： http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken
如果这不是原因，那么它可能与您在滚动窗格中有图像这一事实有关。您需要包含图像的宽度和高度（请参阅http://jscrollpane.kelvinluck.com/image2.html）或自动重新初始化窗格（请参阅http://jscrollpane.kelvinluck.com/image.html）。
希望对你有帮助:)
【讨论】：
嗨。我对这种快速帮助印象深刻，因为这是我在这里的第一个问题。其实你是对的，我在发布我的问题后发现了这一点。 我喜欢 autoReinitialize 选项，但我不得不远离它，因为它使我的整个 scrollTo 过渡非常不稳定。我找不到解决这个问题的方法。 它只在 IE 中不稳定（使用 IE8）。也许有人也有解决方案。 请查看我的更新以获得我的最终解决方案。很抱歉我一口接一口，但我仍然必须习惯那个我以前从未使用过的新门户。 很高兴您找到了解决方案。有趣的是，直接在图像上添加宽度和高度对你不起作用——我确信我之前已经成功地做到了。您是想将它们添加为属性还是样式标签？【参考方案2】：在$(window).load而不是$(document).ready中调用jscrollpane
【讨论】：
请注意，从 jQuery 版本 1.8 开始不推荐使用 load 事件。新方式显示在why $(window).load() is not working in jQuery?【参考方案3】：我还发现在 .scroll-pane 中为 line-height 添加 css 规则可以解决我的身高问题。
例如：
.scroll-pane line-height: 1;
或您的内容可能需要的任何行高。
我还发现，如果您使用@font-face，jscrollpane 可能会在您的字体正确加载之前进行高度计算，因此会计算错误。我通过添加设置解决了这个问题：
autoReinitialise: true
虽然它在计时器上运行，但请谨慎使用。
【讨论】：
【参考方案4】：如果您的 jScrollPane div 区域内有图像，只需定义其宽度和高度。
<div class="scroll-pane">
<img src="image.jpg" />
</div>
这将修复 jScrollPane 的 webkit 错误。哦，当然是在 JS 之前加载 CSS
【讨论】：
以上是关于chrome 设置div高度无效的主要内容，如果未能解决你的问题，请参考以下文章