我通常只使用黑暗的主题进行编码,因此Sublime Text 3的侧边栏保持光线主题无论你应用什么主题都很烦人.

有谁知道如何改变这个？

我的配置:Mac OSX 10.10.1 Yosemite,Sublime Text 3 Stable Channel,Build 3065

看起来Chrome/Firefox不会渲染边框tr,但如果选择器是渲染边框则会渲染边框table tr td.

如何在tr上设置边框？

我的尝试,这不起作用:

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

这是一个类似的问题:设置边框到表tr,适用于IE 6和7以外的所有内容,但除了IE之外它似乎无处不在.

我有一个基本的div元素来表示我显示几秒钟然后使用淡出的消息

$('#message').fadeOut(5000);

如果用户将鼠标悬停在div上,我希望能够取消淡出.

一旦fadeOut方法开始淡化div,我该如何取消淡出？

我现有的代码,如果鼠标在显示时进入div,则可以工作,但是如果用户在div开始淡入时悬停在div上,我需要允许.

$('#message').mouseenter(function() {
  clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
  this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
  this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});

我有一个输入 Web 组件，它有一个非常简单的 API - 它有 aget state()和set state(model). 该 Web 组件还处理label用于输入的 ，因此简单的model如下所示：

{
  "value": "Foobar",
  "required": true,
  "disabled": false,
  "label": {
    "text": "Label for input",
    "toolTip": "Tooltip for the input's label",
    "position": "east"
  }
}

现在为了描述argTypes故事，我尝试了以下方法：

export default {
    title: `Components/Input/text-input`,
    argTypes: {
        value: { control: 'text' },
        disabled: { control: 'boolean' },
        required: { control: 'boolean' },
        label: {
            text: { control: 'text' },
            toolTip: { control: 'text' …

设想：

• 我们正在使用 webpack 4 从我们的 Javascript 源创建一个包。
• 我们没有使用 Babel，因为我们只为单一平台（最新的 Chrome）创作，而且我们只使用 Chrome 中直接可用的功能，因此不需要转译。

这样做的好处是包更小，开发时的周转时间要快得多。

现在我们想开始使用第4 阶段的 可选链接功能，该功能可以在 Chrome 中使用标志启用。

我试着用谷歌搜索这个，我能找到的只是babel 有一个插件。

问题：有什么方法可以让 webpack 在省略 babel 的同时接受这种语法？

以下是 webpack 当前报告的内容：

ERROR in ./src/js/components/custom-select.js 245:12
Module parse failed: Unexpected token (245:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      */
|     focus() { …

我已经在最新版本的Firefox,Chrome,IE 11中对它进行了测试.在这些浏览器中,当您使用CSS calc()函数计算时,它都不起作用width.据我所知,我已正确应用它.作为参考,您可能想要检查

http://www.sitepoint.com/css3-calc-function/

为什么这不起作用？

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}

<div></div>

演示:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

编辑:

是的,这个问题在许多编辑过程中发展成为重复,但我仍然认为这应该保留在这里,因为它比例如CSS calc()不能正常工作更好地说明问题.此外,imho的答案要好得多.

我有一组使用vpack 4捆绑在一起的spec v1自定义元素（和babel-loader进行转换）。

所有组件看起来都与此类似：

export class CompDiv extends HTMLDivElement {
  constructor(...args) {
    const self = super(...args);
    self.property = null;
    return self;
  }
  connectedCallback() {
    console.log('connected CompDiv');
  }
}

customElements.define('comp-div', CompDiv, { extends: 'div' });

现在，要能够使用选择性的命名导入从这些组件创建自定义程序包，我需要将这些文件标记为没有副作用。

但是，组件注册发生在模块本身中：

customElements.define('comp-div', CompDiv, { extends: 'div' });

据我了解，这是一个副作用。

现在我有一个index.js基本上看起来像这样的：

export { CompDiv } from './components/comp-div/comp-div';
...
export { CompBtn } from './components/comp-btn/comp-btn';

我的webpack入口点如下所示：

import 'document-register-element';
import 'babel-polyfill';
import { CompDiv } from './index';

现在，当我执行此操作时CompBtn（以及未将其导入到我的webpack入口点中），（以及index.js中的所有其他导出结果）最终成为捆绑包的一部分。

建议使用这些Web组件在webpack中进行树状握手的推荐方法是什么？

我想在div中间划一条线.在下图中,该行应位于红色框的中间.

我正在尝试使用行高,但不能.

这是代码:

HTML/CSS:

.wrap {
  text-align: center;
  margin: 20px;
}
.links {
  padding: 0 10px;
  border-top: 1px solid #000;
  height: 1px;
  line-height: 0.1em;
}
.dot {
  width: 20px;
  height: 20px;
  background: red;
  float: left;
  margin-right: 150px;
  position: relative;
  top: -10px;
}

<div class="wrap">
  <div class="links">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

演示: https ://jsfiddle.net/nkq468xg/

当事件的内容时引发的事件,你怎么知道哪些元素获得焦点？

正确的方法似乎是使用事件的relatedTarget属性.但是,这似乎不适用于所有浏览器:

• 在谷歌浏览器中,它可以工作
• 在Firefox和Internet Explorer中,relatedTarget为null
• 在Safari中,relatedTarget属性甚至不存在

我找到了一个只在IE中工作的解决方法(使用document.activeElement),但我想知道是否有一个通用的解决方案已被证明可以在所有主流浏览器中使用.

虽然我可以找到类似的问题和答案,但我找不到任何真正适用于所有浏览器的解决方案.

编辑:下面的例子显示了我的意思.

HTML:

document.getElementById('text1').addEventListener('focusout', function(e) {
  // At this point, I want to know which element is receiving the focus (i.e. text2)
  console.log(e.relatedTarget); // works in Chrome
  console.log(document.activeElement); // works in IE
  // both do not work in Firefox or Safari
});

使用Javascript/JQuery的:

<input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" />

我得的WebPack与巴贝尔工作,包括@通天塔/填充工具,还试图使用时IE11仍是投掷SCRIPT438错误.forEach上NodeList.

这是我的 package.json

{
  ...
  "scripts": {
    "build:js": "webpack --config ./_build/webpack.config.js"
  },
  ...
  "browserslist": [
    "IE 11",
    "last 3 versions",
    "not IE < 11"
  ],
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0"
  }
}

我的webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => {

  const javascript …