小编Ric*_*ock的帖子

在Chrome中运行以下内容,然后按Tab键直到窗口滚动:

<ol>
  <li><input type="text" autofocus></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li><li><input …

我已经传递了一个动态创建HTML的复杂应用程序.

问题是,前一个人不知道单选按钮的"名称"属性实际上是组关联.

有了以下标记,有没有办法把它们分成两组

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 1 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 1 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 1 Option 3</label>
</div>

<div>
  <%-- would like this to be a seperate group without changing name--%>
  <label class="radio-inline"><input type="radio" name="radio" value="1">Group 2 Option 1</label>
  <label class="radio-inline"><input type="radio" name="radio" value="2">Group 2 Option 2</label>
  <label class="radio-inline"><input type="radio" name="radio" value="3">Group 2 Option 3</label>
</div>

是否有任何div或任何我可以围绕他们分开分组？我尝试了字段集和图例但它没有效果.我知道我可以将每个人放在一个表格中,但之后他们不会全部提交.

给定此文件：

http://mtarchive.geol.iastate.edu/2019/02/18/mrms/ncep/GaugeCorr_QPE_01H/GaugeCorr_QPE_01H_00.00_20190218-150000.grib2.gz

…根据我使用的软件，我得到不同的输出。

wgrib2 2019021815.grib2 -csv wgrib2.csv

和

cdo outputtab,date,time,lat,lon,value 2019021815.grib2 > cdo.txt

两种输出：

-3 (undefined) :  8,869,250 records
0              : 14,848,865 records
Other values   :    781,885 records
___________________________________
Total          : 24,500,000 records

然而：

gdal_translate.exe -of xyz 2019021815.grib2 gdal.csv

-3所有24,500,000条记录的输出。

如果使用Python + GDAL解析文件，则会得到相同的结果。

这是GDAL中的错误吗？我希望能够使用Python解析这些文件。

我还在将Windows用于GDAL，可以从https://gdal.org/download.html下载。

我正在使用Linux for CDO，可以从https://code.mpimet.mpg.de/projects/cdo/下载

使用括号表示法,可以使用零个或多个值初始化数组:

var a= [];              //length: 0, no items
var a= [1];             //length: 1, items: 1
var a= [1,2];           //length: 2, items: 1,2

使用new Array(),您可以使用零或两个或更多值初始化数组:

var a= new Array(0);    //length: 0, no items
var a= new Array(1);    //length: 1, items: undefined
var a= new Array(1,2);  //length: 2, items: 1,2

参考多参数语法,在JavaScript:The Definitive Guide中,Flanagan写道:

使用数组文字几乎总是比使用Array()构造函数更简单.

他没有提供任何例子,其中的多参数语法是比较简单的,我想不出任何.但是,"几乎总是"这些词语暗示可能存在这样的情况.

你能想到吗？

请注意,我理解方法之间的区别.我的具体问题是,为什么你会使用多参数语法new Array()？弗拉纳根意味着可能有一个原因.

鉴于这种简单的布局:

HTML

<div class="container">
  <div class="imgContainer">
    <img src="http://placehold.it/400x400">
  </div>
  <div>
    This should always stay to the right of the image.
  </div>
</div>

CSS

.container {
  height: 20vh;
}

.imgContainer {
  float: left;
  height: 100%;
}

img {
  height: 100%;
}

Chrome,Firefox和Opera正确显示如下:

IE11根据图像的自然宽度错误地将文本放置在右侧400像素:

当您增加窗口的高度时,文本应保持粘在图像的右侧.这在Firefox中可以正常工作.

但是,文本与Chrome和Opera中的图像重叠:

问题: 我可以添加哪种样式会导致所有浏览器的行为一致吗？

[注意:我在处理这个问题时发现了这一点.我以为我有一个解决方案,直到我意识到除了Firefox之外的任何浏览器都没有响应.

我正在尝试对齐表格顶行中的文本，以便使用旋转变换功能垂直显示。虽然我成功地旋转了表格标题中的单词，但我无法将表格列的宽度缩短为与旋转标题的宽度相同。（如果水平放置，它保持标题的相同宽度）。另外，我使用百分比来表示列宽。

.vertical-th {
  transform: rotate(-90deg);
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th colspan="3"></th>
    <th class="vertical-th">Manuality</th>
    <th class="vertical-th">Probability</th>
    <th class="vertical-th">Gravity</th>
    <th class="vertical-th">Mitigation</th>

  </tr>
</table>

在IE,Edge和Safari中,a的<th>后代<li>是中心对齐的.

在Chrome,Firefox和Opera中,它是左对齐的.

根据W3C渲染建议(斜体矿):

用户代理预期具有在他们的用户代理的样式表与规则匹配的第具有为"文本对齐",其计算值的父节点的元素性质是它的初始值,其声明块由只是一个单一的声明,用于设置的'text-align'属性为值'center'.

斜体部分表示如果<th>元素的父元素text-align尚未更改,则元素应居中.

对于Chrome,Firefox和Opera的<th>后代来说,情况并非如此<li>.假设他们忽略了W3C建议,我是否正确？

(使用时很容易克服这个问题th {text-align: center;},所以我不需要解决方案.)

编辑

我已经收到了几个关于这种行为的好解释,但答案并不令人满意 - 因为没有海报的错误.

我认为W3C的目的是<th>元素应该居中,除非它们包含或继承不同的显式 text-align样式.<th>由于隐式样式的复杂级联继承,元素应该左对齐是没有意义的.

它似乎取决于W3C在报价中的"初始值"意味着什么.一个<li>人的text-align财产的"初始价值",match-parent显然不同于text-align: initial.

希望W3C将来会澄清这一点.与此同时,th {text-align: center;}解决了这个问题.

例:

th, td {
  border: 1px solid #ddd;
}

<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG …

鉴于jQuery的写作理念更少,做得更多,当我看到这个时,我总是感到惊讶:

$(this).prop('checked')

......而不是这个:

this.checked

纵观最新的jQuery源,prop()提供了方便,这两个陷阱:

1. $(elem).prop('for')相当于elem.htmlFor.
2. $(elem).prop('class')相当于elem.className.

它也标准化tabIndex为:

• 0表示没有选项卡索引的可列表元素.
• -1表示非可列表元素.

prop() 对于一次设置多个元素的属性以及在单个元素上链接属性肯定很有用.

但是,prop()除了规范化之外,是否有任何优势(除了惯用)在单个元素上设置或检索单个属性tabIndex- 特别是当你有对元素的引用时(例如this在回调中)？

我不认为规则集中CSS的顺序很重要,只要没有隐含的重复规则(例如border和border-top).

实际上,许多CSS样式指南推荐任意顺序,例如"按组"或"按字母顺序".

但是,规则集的顺序font和line-height内部可能会产生很大的不同:

div {border: 1px solid gray; float: left;}
#D1 {font: 20px arial; line-height: 3;}
#D2 {line-height: 3; font: 20px arial;}

<div id="D1">This is a test</div>
<div id="D2">This is a test</div>

无单位行高应该是字体大小的乘数.

但为什么font规则必须先于line-height规则才能实现呢？