jquery - 具有等高边框的等高列的跨浏览器 CSS

Question

我的目标是使下方屏幕截图中的边框具有相同的高度:

两边的文字可以是可变长度的，但右边总是会变长。

这是stackexchange中很常见的一种问题，通常是关于背景的高度，而不是边框​​。但是我尝试过的大多数事情都没有用。但是，使用 jquery，我能够实现我想要的结果:

jquery 如下，以及解释 HTML 中需要什么的注释:

// add equal height border to right panel
// to prevent flash, it is set in the html to border:none, and enabled here
// if javascript is disabled, the border will be missing - no biggie
// - 2 needed to get it perfect
$('#right-panel .rounded').height($('#left-panel').height() - 2).css('border','solid maroon 1px');

HTML

<div class="industry-body">
    <div id="left-panel" class="industry-panel">
        <div class="rounded">
            <div class="industry-bar top-left top-right"></div>
            <div class="industry-panel-inner">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac massa non odio mattis molestie. Donec feugiat, risus nec dictum luctus, lorem magna elementum felis, eget varius libero lacus vel quam. Nunc hendrerit lorem sed elit. Fusce ultrices placerat mauris. Integer dignissim, nunc sed porta sollicitudin, dui ante egestas purus, a egestas magna urna sed ipsum. Suspendisse potenti. Morbi tellus mi, cursus nec, congue eget, ornare eu, nulla. Etiam ultricies, ipsum bibendum bibendum interdum, nibh risus porta enim, et vulputate enim eros ut justo. Suspendisse suscipit laoreet quam. Sed faucibus ante at libero. Sed vehicula porttitor quam. Fusce in nisl a erat congue facilisis. Nullam lectus dui, rutrum et, venenatis sed, tristique ac, velit. Pellentesque nec lacus. Phasellus sed pede vel erat semper ultricies.
            </div>
        </div>
    </div>
    <div id="right-panel" class="industry-panel">
        <div class="rounded" style="border:none !important;">
        <!--<div class="rounded">-->
            <div class="industry-bar top-left top-right"></div>
            <div class="industry-panel-inner">
                <p class="industry-panel-head">Did you know?</p>
                Sed feugiat, lectus vitae mollis euismod, diam odio sollicitudin massa, ac ullamcorper dolor urna porttitor ligula. Proin ultricies elit vitae sem. Pellentesque pulvinar adipiscing nisl. Etiam non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed luctus. Etiam sodales dolor a purus. Curabitur quis est a ante pellentesque porttitor. Sed fermentum, nisl in viverra dictum, ante quam gravida nulla, ut vulputate nibh nisi vel sapien. Aenean eros. Quisque bibendum augue vitae erat. Sed iaculis turpis in erat.
            </div>
        </div>
    </div>
</div>

特别是，设置 border:none 的样式必须内联完成并且有 !important，否则它将不起作用。由于某些原因，将其放在外部样式表中将无法在 Chrome 中使用。

问题是:

在某些浏览器中让 jquery 应用正确的边框高度会导致“闪烁”，原始错误高度的边框会瞬间出现，然后由正确大小的边框替换。要删除闪光灯，有一个“技巧”，其中 HTML 有 border:none;并且 jquery 在调整大小完成后重新打开边框。

使用技巧(border:none 并使用 jquery 显示)在某些浏览器中可以消除 flash，但在其他浏览器中可以防止边框出现。

应用“技巧”(其中“ok”表示存在适当大小的边框且没有闪光): Chrome - 好的 Firefox - 好的 IE8-好的 IE9-好的 IE10 - 无边框 IE11 - 无边框 Safari - 无边框

没有应用“技巧”: Chrome - 闪光 Firefox - 好的 IE8-好的 IE9-闪存 IE10-闪存 IE11-好的 Safari - 好的

顺便说一句，这是一个奇怪的分类，因为它将 Safari 归入了我以前从未见过的某些版本的 IE 中。

因此看来解决方案是检测浏览器，并将技巧应用于 Chrome、Firefox、IE8、IE9，而不将技巧应用于 IE10、IE11 和 Safari。

有没有比必须检测浏览器更好的解决方案？

Answer 1

您可以在纯 CSS 中使用 display:table-cell。这是一个 fiddle :http://jsfiddle.net/pq4x8mzn/