小编use*_*860的帖子

折叠边框模型在Web浏览器中的实现是否有效?

我一直试图从CSS 2.2规范中理解这段摘录一段时间没有成功(大胆的选择是我的):

UA必须通过检查表格第一行中的第一个和最后一个单元格来计算表格的初始左右边框宽度.表格的左边框宽度是第一个单元格折叠左边框的一半,表格的右边框宽度是最后一个单元格折叠右边框的一半.如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

通过检查使用表的顶部边框折叠其顶部边框的所有单元格来计算表格的顶部边框宽度.表格的顶部边框宽度等于最大折叠顶部边框的一半.

这就是Chrome中实现边框,折叠等的方式(FF和IE> 7是相同的):

table {
  border: 6px solid green;
  border-spacing: 0;
  border-collapse: collapse;
}
#cell_1_1 {
  border: 28px solid red;
}
#cell_2_1 {
  border: 12px solid chartreuse;
}
#cell_2_2 {
  border: 2px solid cyan;
}
Run Code Online (Sandbox Code Playgroud)

在Web浏览器中实现折叠边框模型

虽然我期待这样的事情:

预期的结果

我期待桌子的左边缘厚14 px.因为第一个单元格的折叠左边框宽度#cell_1_1为28px(表格的左边框宽度是第一个单元格折叠左边框的一半),而左侧边框在单元格和表格之间分开.因此,在视觉上,该表在第一个单元附近具有28px边界,但是14px属于第一个单元的边界.然后表格的左侧边框保持不变.如果某个单元格的边界较宽,则它们向左突出,而不会影响表格的左边界.

顶部边框也是如此.

此外,我认为问题可能与摘录中的初始单词有关,即这些规则仅适用于表没有指定边框,但结果是不相关的(删除表的边框样式规则)根本就删除了绿色边框).

所以任何人都可以回答下一个问题:

  • 在Chrome,FF,IE中这种折叠边框模型的实现是否正确?

  • 如果它们是正确的,我对规范的理解有什么问题?


现在,如果我们反之亦然并假设Chrome中的实现作为推导规范的起点,那么这部分应该是下一个(我只保留了与左边界相关的部分以简洁):

UA必须计算表格的初始左右边界宽度,然后通过检查表格第一行中的第一个和最后一个单元格,将其用于相对于其包含块定位表格.在所有边界冲突(如果已解决)之后,表格的左边框宽度是第一个单元格折叠左边框的一半

...

如果后续行具有较大的折叠左右边框,则任何多余的溢出都会溢出到表格的边缘区域.

...

在确定表是否溢出某个祖先时(参见"溢出"),会考虑溢出到边距中的任何边界,但不会影响表相对于其包含块的位置

然后摘录会有意义.

这里有一个表格,边框宽于第一个单元格的内部,在一个包含块的粉红色背景中(我们可以看到,表格的边框是在第一个单元格的边框上选择的,因为它更宽,然后是这个边框用于将表放置在容器内.后续单元格的较宽边框突出于表的边界之外):

chrome中的当前实现,表的边框比第一个单元格的边框宽

这里有一个相同的表,第一个单元格的边界比表格的边框宽,在边界冲突解决期间选择它.此处此边框用于相对于容器定位表:

Chrome中的当前实现,表的边界比第一个单元格的边界窄

html css css-tables

18
推荐指数
1
解决办法
234
查看次数

浮动元素是否会像定位元素一样创建单独的堆叠上下文?

最近我点了一篇关于CSS z-index属性的有趣文章.我发现它是因为我正在寻找一个答案,为什么来自前一个div的溢出文本显示在后面div的背景上方但不在下面div中的span的背景之上,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)

块框内的内联框

对此的解释是浏览器以特定顺序绘制元素,这是基于所谓的堆叠顺序:

浏览器中HTML/CSS布局的堆叠顺序

因此,对于布局中的根元素和每个定位元素,浏览器创建这样的堆叠顺序,然后绘制所有这些订单,对不起双关语,相应的顺序.

所以这就是内联元素和文本(创建内联框的那些)被绘制在块级元素之上的原因,即使这些块元素稍后出现在文档中,就像我上面的jsfiddle一样.


所以问题本身.

我仍然无法找到答案为什么这些内联框,如果它们被创建,内联元素和浮动元素内的文本不是根据上面的堆叠顺序的方案与浮动元素之外的其他内联框绘制,就像这里(jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

在这里你可以清楚地看到,文档中第一个div的文本(未浮动)是在span的黄色背景上方(之后)绘制的,而span是内联元素,并且根据上面的堆叠顺序的图像应该在浮动容器(其背景和边框)之后绘制.

那么有人对此有一个可靠的解释吗?我认为浮动元素可以创建类似于自己的堆叠顺序的东西,就像定位元素那样,但我还没有在网上找到任何提及.

html css z-index css-float

16
推荐指数
1
解决办法
386
查看次数

window.document是null还是未定义?

我一直在对window.document对象进行一些研究,以确保我的一个JavaScript解决方案是可靠的.是否存在window.document对象为null或未定义的情况?

为了便于讨论,这里是一段不相关的示例代码.是否有任何情况下这段代码会失败(又称抛出异常)?

$(document).ready(function() {
    var PageLoaded = (window.document.readyState === "complete");
});
Run Code Online (Sandbox Code Playgroud)

javascript dom

8
推荐指数
1
解决办法
2万
查看次数

为什么文件测试操作符不起作用(Perl)?

在"Programming Perl" -w文件测试操作符中描述为:

-w文件可由有效的UID/GID写入.

我有两个文件:

-rwsrwxrwx 1 testuser testuser 226 Jul 20 20:31 script.pl
-rw-rw-r-- 1 testuser testuser  34 Jul 14 17:24 file.txt
Run Code Online (Sandbox Code Playgroud)

suid设置为on script.pl,所以当我以用户caligula运行时,有效的UID/GID应该是testuser的一个.script.pl是:

#!/usr/bin/perl
use v5.14;
if (-w 'file.txt') {
    say "true";
}
else {
    say "false";
}
Run Code Online (Sandbox Code Playgroud)

但是当我运行它时caligula@ubuntu-host:~$ ./script.pl,输出总是如此false.为什么会发生这种情况,可能是我不明白该运营商的正确用法?

我的赞赏.

unix perl access-rights

6
推荐指数
1
解决办法
1502
查看次数

如何在Linux上的Firefox中删除聚焦无线电输入的边框/轮廓

我知道关于SO的类似问题有很多答案,但似乎没有一个对我有用.问题是在Firefox上只有Linux(Windows很好),无线电输入在聚焦时会有橙色轮廓.当输入放在元素内时,这个大纲是错误的overflow: hidden: 放置在具有溢出隐藏的元素内的错误轮廓

<div style="width: 100px; margin: 30px auto; overflow: hidden;">
    <label><input type="radio" name="some_radio">radio 1</label>
    <br>
    <label><input type="radio" name="some_radio">radio 2</label>
</div>
Run Code Online (Sandbox Code Playgroud)

那么我怎么能摆脱那个大纲,任何人都可以帮忙吗?我试过了input::-moz-focus-inner,::-moz-focusring但没有任何效果.

这是jsFiddle,但只有在使用Linux时才能看到问题.

css firefox outline radio-button

6
推荐指数
1
解决办法
3170
查看次数

如何在单元测试之间重置requirejs模块

我有一个JavaScript项目,我想观察TDD方法.我选择这样做的业力框架和requirejs库,并遵循业力的文档证明的例子在这里.

有一个单元测试文件的示例,它是:

define(['app', 'jquery', 'underscore'], function(App, $, _) {

    describe('just checking', function() {

        it('works for app', function() {
            var el = $('<div></div>');

            var app = new App(el);
            app.render();

            expect(el.text()).toEqual('require.js up and running');
        });

        it('works for underscore', function() {
            // just checking that _ works
            expect(_.size([1,2,3])).toEqual(3);
        });

    });

});
Run Code Online (Sandbox Code Playgroud)

这种方法的主要问题是无法清除每个测试的App模块.因此,如果在一次it调用中App中有一些更改(如关闭变量更改等),则它们可能会影响其他it调用.

有人可以就此提出建议吗?这些都是如此受欢迎的工具,我无法相信没有人遇到过这样的情况.

因此,为了概括这个问题,我想问一下这些更具体的答案:

  • 有没有办法在requirejs中"重置"(清除)模块?(实际上,我认为没有这样的方法,除了再次重新加载所有模块)
  • 是否有更好的方法来运行karma和requirejs,这样模块就没有任何其他测试(it函数调用)的遗留(副作用)?

javascript unit-testing requirejs karma-runner

6
推荐指数
1
解决办法
2536
查看次数

jquery焦点模糊传递参数

我似乎无法defaultValue在我的.blur()函数中访问变量.我尝试了各种各样的东西,但没有运气.到目前为止,我只得到一个空物体.怎么了?

jQuery(document).ready(function(){

    jQuery('#nameInput, #emailInput, #webInput').focus(function(){      
        var defaultValue = jQuery(this).val();
        jQuery(this).val("");
    })
    .blur(function(defaultValue){   
         if(jQuery(this).val() == ""){
             jQuery(this).val(defaultValue);
         }
    }); 

});
Run Code Online (Sandbox Code Playgroud)

javascript jquery javascript-events

5
推荐指数
2
解决办法
7777
查看次数

typeglobs可以在Perl中用作引用的原因

对不起,可能是不明确的问题,但我问它,因为我不喜欢阅读smth,不明白我在读什么.

以下是"Programming Perl"的片段:

由于你取消引用某些东西的方式总是表明你正在寻找什么样的指示物,所以尽管typeglob包含多种不同类型的指示物,但是可以使用与引用相同的方式使用typeglob.所以$ {*main :: foo}和$ {\ $ main :: foo}都访问相同的标量变量,尽管后者更有效.

对我来说,这似乎是一种错误,如果是这样的话,那就是正确的:

您可以使用typeglob而不是标量变量,因为引用始终是标量,编译器知道您需要什么.

本书的文本阅读器的原因可以假设引用可以是标量变量之外的其他内容(即符号表中的标量条目).一旦我看到一个警告:use of array as a reference is deprecated,所以在我看来很久以前"Programming Perl"中的这一段是有意义的,因为引用可能不仅仅是一个标量,而是在新的第4版中它根本就不是改为遵守现代Perl.

我检查了本书的勘误页面,但一无所获.

我的假设是否正确?如果不是,那么有人会如此愉快地解释,我错了.

先感谢您.

perl reference dereference perl-data-structures

5
推荐指数
1
解决办法
958
查看次数

请帮助我理解"Programming Perl"一书中的片段

我读过By Tom Christiansen,Brian d foy,Larry Wall,Jon Orwant的"Programming Perl".有以下文字我无法理解(我不明白的确切地方标有粗体):

您真正想知道的是哪些运营商为其操作数提供了哪些上下文.实际上,您可以轻松地告诉哪些供应列表上下文,因为它们的语法描述中都有LIST.其他一切都提供标量背景.一般来说,它非常直观.如有必要,可以使用 伪函数强制标量上下文到LIST中间的参数scalar.Perl没有办法在上下文中强制列表上下文,因为在任何你想要列表上下文的地方它已经由某个控制函数的LIST提供了.

为方便起见,我想提出以下问题:

  1. 片段中的LIST是什么意思?

  2. 什么是句法描述?(似乎是某种文档)

  3. 下一个文字是什么意思:

你可以强制标量上下文到LIST中间的参数

perl perl-context

4
推荐指数
1
解决办法
115
查看次数

需要解释错误消息“TypeError:接收者必须是类的实例”

当我运行这段代码时:

'use strict';

class Base {
  constructor() {
    this._public();
  }
}

class Child extends Base {
  constructor() {
    super();
  }

  _public() {
    this.#privateMethod();
  }

  #privateMethod() {
    this.bar = 1234;
  }
}

const c = new Child();
console.log(c.bar);
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

   this.#privateMethod();
         ^

TypeError: Receiver must be an instance of class Child
Run Code Online (Sandbox Code Playgroud)

据我了解 JavaScript,以下代码中的接收者正是 Child 类的一个实例。它甚至显示在开发工具检查器中:

开发工具截图

那么有人可以向我解释一下发生了什么事吗?这是一个错误还是什么?


实际上FF显示了更准确的错误信息:

Uncaught TypeError: can't access private field or method: object is not the right class
Run Code Online (Sandbox Code Playgroud)

javascript oop inheritance typeerror ecmascript-next

4
推荐指数
1
解决办法
2355
查看次数