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在某些浏览器中应用正确的边框高度会导致＆＃34; flash＆＃34;，其中原始错误的高度边框会立即出现，然后由正确大小的边框替换。要删除闪光灯，有一个＆＃34;技巧＆＃34;其中HTML有border：none;调整大小后，jquery会重新打开边框。

使用技巧（border：none并使用jquery显示）在某些浏览器中可以消除闪存，但在其他浏览器中可以防止边框出现。

使用＆＃34;技巧＆＃34;应用（其中＆＃34;确定＆＃34;表示正确尺寸的边框存在且没有闪光）： Chrome - 好的 Firefox - 好的 IE8 - 好的 IE9 - 好的 IE10 - 没有边框 IE11 - 没有边框 Safari - 没有边框

没有＆＃34;技巧＆＃34;适用于： Chrome - 闪光灯 Firefox - 好的 IE8 - 好的 IE9 - 闪光灯 IE10 - 闪光灯 IE11 - 好的 Safari - 好的

顺便说一句，这是一个奇怪的分类，因为它将Safari放入一些IE版本中，我以前没有见过。

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

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

Answer 1

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

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

1 个答案: