具有等高边框的等高列的跨浏览器 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 应用正确的边框高度会导致 "flash"，原始错误高度的边框会立即出现，然后由正确大小的边框替换。要去掉flash，有一个"trick"，其中HTML有border:none；并且 jquery 在调整大小完成后重新打开边框。

使用技巧（border:none 并使用 jquery 显示）在某些浏览器中可以消除闪光，但在其他浏览器中则根本不会出现边框。

应用 "trick"（其中 "ok" 表示存在适当大小的边框并且没有闪光）： Chrome - 好的 Firefox - 好的 IE8-好的 IE9-好的 IE10 - 无边框 IE11 - 无边框 Safari - 无边框

未应用 "trick"： Chrome - 闪光灯 Firefox - 好的 IE8-好的 IE9-闪存 IE10-闪存 IE11-好的 Safari - 正常

顺便说一下，这是一个奇怪的组合，因为它将 Safari 放入了我以前从未见过的某些版本的 IE class。

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

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

Answer 1

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

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

Cross browser CSS for equal height columns having equal height borders

css

jquery

border

multiple-columns