谷歌浏览器错误地显示溢出容器的引导程序 .thumbnail 图像 [英] Google Chrome incorrectly displays bootstrap .thumbnail images overflowing container
问题描述
这个问题与为什么图片没有在 Chrome 中宽度超过 500 像素?
参见http://abmphotography.beta.cjbm.net/aileen-kevin
此问题现已修复，但现在当页面最初在 Chrome 中加载时，较宽的图像会溢出其 div.thumbnail 容器.见:
奇怪的是，如果您打开检查器，则专注于 或其中的任何内容，问题会立即自行纠正.此外，如果您打开控制台并评估$('body')"，它会立即更正(这在 javascript 文件中不起作用).
此外，如果您将浏览器的大小调整为高于或低于 width:980px，那么它也会自行纠正(这是媒体查询切换的点，以及 li 更改之间的填充.
更新:
我使用以下 jQuery 解决了这个问题:
$('ul.thumbnails img').each(function() {$(this).closest('li').width($(this).width());});不过，我欢迎纯 CSS 解决方案.
不使用 row 和 span 类的任何特殊原因?我想我的 div 也溢出到窗外，但立即注意到我没有使用它们.我的一行内容结构通常如下所示:
<div class="span12"><h1>一些标题</h1><p>一些内容</p>span12 可以是您想要的任何尺寸.因为它是一个 12 列的网格，所以 12 将使用整个网格的宽度.这可能不一定能解决您的问题，但也许可以！无论哪种方式，这都只是一般的好习惯.
This question relates to Why are the images no wider than 500px in Chrome?
See http://abmphotography.beta.cjbm.net/aileen-kevin
This has now been fixed, but now when the page initially loads in Chrome, the wider images overflow their div.thumbnail containers. See:
Weirdly, if you have the inspector open, focussed on <html> or anything within, the issue immediately corrects itself. Also if you have the console open and evaluate "$('body')" it immediately corrects (this doesn't work when in the javascript file).
Additionally, if you resize the browser above or below width:980px, then it also corrects itself (this is the point that the media queries switch, and the padding between the li's changes.
Update:
I have worked around this issue with the following jQuery:
$('ul.thumbnails img').each(function() {
$(this).closest('li').width($(this).width());
});
However I'd welcome a pure CSS solution.
Any particular reason why you're not using the row and span classes? I think I've had my divs spill outside of the window too, but immediately noticed that I wasn't using those. My structure for one row of content will generally look like this:
<div class="row">
<div class="span12">
<h1>Some Heading</h1>
<p>Some content</p>
</div>
</div>
span12 can be any size you'd like. Since it's a 12 column grid, 12 would use the whole width of the grid. This may not necessarily solve your issue, then again maybe it will! Either way it's just good practice in general.
这篇关于谷歌浏览器错误地显示溢出容器的引导程序 .thumbnail 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
