Question

我有一个div设置为使用jQuery ui resizable。这一切都按预期工作，除了在轮廓和边框之间有不需要的空间，因为可调整大小的div正在扩展.test div。到目前为止，我一直在使用overflow：hidden来解决这个问题。这已经很好了，但是，我现在有一个实例，我正在使用一个样式：after，它被切断了。我怎么能绕过这个？

这似乎是Firefox中的一个问题。

CSS：

.test {
    border: 1px solid #000;
    outline: 1px dashed #9a9a9a;
    /* overflow: hidden; */
}

.test:after {
    border: 11px solid transparent;
    border-top-color: #000;
    border-bottom: 0;
    content: " ";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    right: 10px;
    bottom: -11px;
}

这是jsFiddle example

Answer 1

请在调整大小的功能后将这些行添加到你的jquery

$("div.ui-resizable-n").css('top','0px');
$("div.ui-resizable-e").css('right','0px');
$("div.ui-resizable-s").css('bottom','0px');
$("div.ui-resizable-w").css('left','0px');

这样就会变成

$(document).ready(function(){
    $(".test").resizable({
        handles: "n, e, s, w"
    });

    $("div.ui-resizable-n").css('top','0px');
    $("div.ui-resizable-e").css('right','0px');
    $("div.ui-resizable-s").css('bottom','0px');
    $("div.ui-resizable-w").css('left','0px');
});

Answer 2

这似乎是一个多年来一直困扰Firefox的错误。虽然outline-offset是一个选项，但它只需要应用于Firefox，并且需要考虑溢出的所有内容。更好的选择是这样做：

.test {
    border: 1px solid #000;
}

.test:before {
   content: '';
   position: absolute;
   top: -1px; /* Set to offset top border width */
   left: -1px; /* Set to offset left border width */
   right: -1px; /* Set to offset right border width */
   bottom: -1px;/* Set to offset bottom border width */
   outline: 1px dashed #9a9a9a;
}

http://jsfiddle.net/65cay7gt/9/

Answer 3

如果我理解正确您指的是文字上方和下方的额外空间？因为您在html中使用了p标签，所以大多数浏览器都会在每个段落之前和之后添加默认填充/边距。要更改该间距，您只需添加另一个css类：

.test p{
margin:0px;
}

它定位段落标记内的任何文本，这些文本位于“test”类标识的内容中。请注意，它会将所有边距更改为0px，如果您需要在不同边上的特定金额，您可以使用margin-left，margin-right，margin-top，margin-bottom或使用空头。

jQuery UI可调整大小的扩展div

3 个答案: