Google Chrome - 字段集溢出错误 [英] Google Chrome - Fieldset Overflow Bug

问题描述

Google Chrome似乎在字段集中溢出内容时出现错误。

这里是一个jsfiddle演示了问题：http://jsfiddle.net/Dismissile/Lnm42/

如果您查看网页，将会看到，当你有一个字段集中的容器，并且容器有 overflow：auto 设置，并且该容器有内容将水平溢出，字段集实际上展开使用滚动条：

 < fieldset class =parent> 
< div class =child> 
< div class =grandchild> 
 asdf 
< / div> 
< / div> 
< / fieldset> 
 
< div class =parent> 
< div class =child> 
< div class =grandchild> 
 asdf 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> .parent {
 border：1px solid green; 
 padding：20px; 
 margin：20px; 
} 
 
 .child {
 border：1px solid red; 
 padding：20px; $ b $b overflow：auto; 
} 
 
 .grandchild {
 border：1px solid #ccc; 
 width：2000px; 
 padding：10px; 
} 
  

是否有可以使用的CSS黑客/

使用JavaScript设置视口的宽度： p>

• http：// jsfiddle。 net / Lnm42 / 2 /

我添加了一个类 fieldset-width 到字段集：

< fieldset class =parent fieldset-width> / p>

然后添加此JQuery代码：

  $ （function（）{
 $（。fieldset-width）。css（width，$（window）.width（） -  82）; 
} 
 
 $（window）.resize（function（）{
 $（。fieldset-width）css（width，$（window） ; 
}）; 
  

我唯一的评论是，我不能想到一个很好的理由干扰默认字段集功能。我不喜欢滚动条滚动条开始。对于输入字段，哪些字段集通常包围，我特别谨慎，让用户滚动到所有输入字段。

Google Chrome seems to have a bug when overflowing content inside of a fieldset.

Here is a jsfiddle that demonstrates the problem: http://jsfiddle.net/Dismissile/Lnm42/

If you look at the page, you will see that when you have a container inside of a fieldset, and the container has overflow: auto set, and that container has content that will overflow horizontally, the fieldset actually expands instead of using a scrollbar:

<fieldset class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
     </div>
</fieldset>

<div class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
    </div>
</div>

CSS:

.parent {
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}

.child {
    border: 1px solid red;
    padding: 20px;
    overflow: auto;
}

.grandchild {
    border: 1px solid #ccc;
    width: 2000px;
    padding: 10px;
}

Is there a CSS hack/fix I can use so that content overflows properly when inside a fieldset in Chrome?

解决方案

Using JavaScript to set the width of the viewport:

• http://jsfiddle.net/Lnm42/2/

I added a class called fieldset-width to the fieldset:

<fieldset class="parent fieldset-width">

Then added this JQuery code:

$(document).ready(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

$(window).resize(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

My only comment is that I can't think of a good reason to interfere with the default fieldset functionality. I dislike "scroll bars within scroll bars" to begin with. For input fields, which fieldsets usually surround, I would be especially cautious about making the user scroll around to get to all the input fields.

这篇关于Google Chrome - 字段集溢出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！