- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
好的,我有一个非常奇怪的 CSS 问题,我想知道任何人都可以提出解释。
重现步骤:
打开 Chrome 并导航到 http://www.mcwhinneys.com/media照片库应该没有对齐,向右偏移大约 50-70 像素在 chrome 中打开开发者控制台
预期结果:
我这样做是为了检查 css,希望看到为什么图像偏到一边,修复 css 并继续。
实际结果:
当开发者工具打开时,图片库会对齐。
有人知道为什么会这样吗?当我检查它时,CSS 似乎没问题,但在打开控制台之前它肯定无法正确呈现。
最佳答案
嗯,错误布局的实际原因是 ngg-gallery-thumbnail-box
上的 text-align: center
的组合(我称之为box 从现在开始)与 position: absolute
+ display: inline-block
在内部 ngg-gallery-thumbnail
(我将其称为拇指)。
它是这样的:
我们将 text-align: center
应用于 box。这将导致它使其内联子元素居中。它(概念上)通过将每个 child 的左边缘放置在当前“文本光标”位置(重要的是,从 box 的中心开始),然后将其向左移动以“重新居中”来做到这一点“它。这也是 - 同样重要的 - box 的“工作”。
我们将 thumb 声明为 inline-block
。这将(除其他事项外)使其遵循其父级的 text-align
,这意味着 - 在这个时间点 - 它居中。
然后我们声明thumb position: absolute
。这会将它从流程中移出,将其左边缘定位在同一点 它最初所在的位置 - 因为我们没有指定 left
/right
.
对此的“天真”解释是它仍然位于盒子的中心,一切都会好起来的,但是我们得到了“副作用”......
因为我们将 thumb 移出了流程,box 不再有任何内联内容,这意味着它的文本光标位于中心,而且它没有不需要居中任何东西。它的“工作”完成了。
但由于 thumb 是行内 block ,它的原始位置仍然基于 box 的文本光标位置( center), 这意味着当我们让它成为 position: absolute
时,它的左边缘将被放置在那个中心。它没有在 box 内水平居中,因为从 box 的 Angular 来看,它的流中没有需要居中的子元素。 p>
这是先有鸡还是先有蛋的问题,因此 Chrome 在为控制台重新呈现页面时似乎会感到困惑。
这个解释也可能有点困惑,但你可以在这里看到结果 - 即使在这个简单的例子中,Chrome 的控制台也会在你尝试检查它时进行回流。在此示例中,它甚至似乎足以在不打开控制台的情况下调整窗口大小 (v17.0.963.56):
据我所知,它首先呈现它的方式是它“本应如此”的方式(上次我检查时,W3C 的建议对此含糊不清,但至少 Firefox 同意预先检查渲染)。
有很多方法可以解决这个问题,我最喜欢的是只使用 text-align: center
来居中……文本,并尝试使用例如margin: auto
使其他内容居中。
关于html - CSS 布局中的奇怪 heisenbug,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9508254/
我正在开发一个应用程序,该应用程序从使用 performSelectorInBackground 启动的单独线程中的循环调用 AudioServicesPlayAlertSound(kSystemSo
如果我在循环中添加调试输出,我有一个行为不同的循环。我想知道这是否是一个编译器错误,或者我是否错误地依赖了一些未定义的 C++ 行为。 循环从 uint64_t 数组中读取整数,将它们存储在临时数组中
我在域套接字上调用 async_read,我的问题是有时我会获得数据,有时我没有,即使远程系统总是返回数据。如果我进行逐步调试,我似乎能够从套接字中读取。如果我自动化单元测试,它们似乎运行得太快而无法
经过一些资源修改(图像)后,我的程序随机崩溃 (0xC0000005)。我知道这些来自糟糕的内存管理,但我找不到它的来源,原因有二:首先,我没有使用很多指针或手动动态分配的变量(我的意思是我使用的是标
好的,我有一个非常奇怪的 CSS 问题,我想知道任何人都可以提出解释。 重现步骤: 打开 Chrome 并导航到 http://www.mcwhinneys.com/media照片库应该没有对齐,向右
好的 StackOverflow - 这是一个奇怪的。 问题 所以我有一个“按钮”(实际上只是一个带有 javascript onclick 监听器的 div),它在页面加载时通过 json 从数据库
我最近修复了我们产品中的一个缺陷,其症状是访问悬空指针导致的访问冲突。 为了良好的实践,我添加了一个单元测试以确保错误不会再次出现。在编写单元测试时,我总是会撤消我的缺陷修复并确保单元测试失败,否则我
使用Django 1.4/Python 2.7/reportlab(开源版)生成pdf。 到目前为止,一切都非常顺利。以前的 pdf 生成(如在 http 中请求返回/下载生成的 pdf 文件)在 D
我刚刚花了最后一个小时来解决 C# 中非托管内存的一个奇怪问题。 首先,一些上下文。我有一个 C# DLL,它导出一些 native 方法(通过 this awesome project templa
我想注意的是,我将描述的场景很少发生,并且在大多数情况下,一切都按预期进行。 我在 Pub/Sub 端有 1 个主题和 1 个订阅。 我的 java 应用程序监听订阅,进行一些处理并发送回确认。由于g
我遇到了一个非常令人困惑的崩溃,我目前正在用尽我的智慧...... 首先是崩溃日志: 日期/时间:2012-02-14 10:55:09.771 +0100 操作系统版本:Mac OS X 10.7.
我正在开发基于 WebKit(使用 C++/Qt4)并支持 JavaScript 的 headless 浏览器。这样做的主要目的是能够生成大量基于 JavaScript 的网站的 HTML 快照(请参
我的一个 iOS 应用程序似乎具有典型 Heisenbug 的症状。该应用程序跟踪用户的家庭位置,因此当用户进入和离开他们的家庭位置时会发生某些事件。 在我测试该应用程序时,它运行良好。我在 CLCi
我有一个 Heisenbug 的经典示例,它是由我以前从未见过的条件触发的。我的遗留应用程序(大约 100K sloc 的旧代码)在特定实例中无法正常工作,仅仅启用 JPDA 远程调试足以改变行为,导
我已无路可走:我有一个单线程 C++ 程序。这里有一些经验数据和背景信息,我试图突出最重要的关键词; 我所说的整个部分没有任何系统调用,除了标准 C++ 库 可能执行的内存(取消)分配调用(std::
在开发 Spring boot REST 端点期间,我的应用程序遇到了奇怪的(heisenbug)行为。也可能与我为每个端点项目制作单独的模块有关。具体来说,它可以运行一次但重新运行后会失败,可能运行
我称此为 Heisenbug 错误,因为该错误仅在未观察到时才存在。这是调用: @selected_members = Member.where(id: params[:member_ids]) @
我正在开发一个使用压控振荡器芯片 (VCO) 来帮助处理信号的系统。芯片制造商 (Analog Devices) 提供了一个将设置文件加载到 VCO 上的程序,但我希望能够从总体信号处理控制系统中设置
最近,我遇到了一个经典的 Heisenbug .情况是这样的: 我在一个面板中有一个树列表,即主视图,在右侧的另一个面板中有一个详细 View ,显示有关当前选定树节点的信息。 (与 Windows
我在 Java 6/Websphere 8.5 上遇到套接字绑定(bind)错误(Liberty 配置文件,Websphere 的精简可用版本)。当再次立即杀死并启动应用程序服务器时,我得到: [ER
我是一名优秀的程序员,十分优秀!