小编Jam*_*lly的帖子

我有一个大胆的项目,并希望得到一些建议.我想拥有一个使用CSS Diamonds的网站,我附上了一张图片,以便更好地了解我正在做的事情.以下是我到目前为止遇到的问题:

• 三角形完全对齐,直到添加子菜单,然后右三个向右移动(这在一个点处起作用).子菜单所在的li也失去了它的钻石
• 子勋章钻石上的文字没有居中.
• 我不能有背景图像,然后钻石然后标题.我尝试过不同的z-index,但它没有用.(要查看菜单标题,需要删除背景图像,并且钻石需要为-1 z-indexed)
• 因为我需要使用跨度来创建侧边栏的三角形文本包装,所以我不能只让侧边栏成为菱形,所以我仍然需要在它下方添加菱形.
• 将正确的文本正文和侧边栏文本正文包裹在钻石上是很棒的,但是我认为这是不可能的,因此我恢复了只有侧边栏包装.

到目前为止,这是我的HTML:我已经注释掉子菜单和我的侧边栏钻石尝试.http://jsfiddle.net/s4XXE/

 /* reset.css */
 html {
   margin: 0;
   padding: 0;
   border: 0;
 }
 body,
 div,
 span,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 code,
 del,
 dfn,
 em,
 img,
 q,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 dialog,
 figure,
 footer,
 header,
 hgroup,
 nav,
 section {
   margin: 0;
   padding: 0;
   border: 0; …

为了分离导航中的链接,我设置了以下内容

#menu-main li a:after{
    content: " * ";
}

当前项目获得额外的

text-decoration: underline;

我现在的问题是,"*"也有下划线,但不应该

我试过补充一下

#menu-main li a:after{
    text-decoration: none !important;
}

但它没有效果

有没有人知道如何保持文字下划线但不是:内容后？

假设我们有以下文件集:

{ "_id" : ObjectId("50a69fa904c8310609600be3"), "id" : 100, "city" : "San Francisco", "friends" : [     {   "id" : 1,   "name" : "John" },  {   "id" : 2,   "name" : "Betty" },     {   "id" : 3,   "name" : "Harry" } ] }
{ "_id" : ObjectId("50a69fc104c8310609600be4"), "id" : 200, "city" : "Palo Alto", "friends" : [     {   "id" : 1,   "name" : "Carol" },     {   "id" : 2,   "name" : "Frank" },     {   "id" : 3,   "name" : "Norman" } ] …

我有一个元素或图片在Chrome中无法正常显示,但它在所有其他浏览器中都应该显示.是什么造成的？

注意:由于它们的性质,这些问题通常过于局部化而无法标记为重复.我已经添加了这个问题作为一种纯粹出于这个原因针对所有这些问题的方法.

仅在上周提出的几个这样的问题的例子是:

Chrome不想显示CSS块

背景图像不显示在Chrome浏览器中

我正在使用 CSS 父类为某些数据定义多个布局。当我更改父类时，布局会根据需要完美更改，但是我认为添加一些 CSS 动画（过渡）可能会很有趣。我似乎无法让它工作。我发现了另一个类似的问题，但它没有答案，而且并不完全相同（或不那么简单）。

这是小提琴：http : //jsfiddle.net/scottbeeson/wmK2F/1/

我真的不在乎现在有什么转变；高度，宽度，颜色，随便。一旦有人告诉我我做错了什么，我就可以调整它。

HTML：

<div id="toggleLayout">Click To Toggle</div>
<div class="layout layoutCards">
    <span class="entity">
        Test
    </span>
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
</div>

CSS：

<div id="toggleLayout">Click To Toggle</div>
<div class="layout layoutCards">
    <span class="entity">
        Test
    </span>
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
</div>

根据字体权重和其他来源的MDN页面,font-weight: bolder使文本内容"一个字体权重比父元素更暗(在字体的可用权重中)."

我有一个测试页面,其中包含Google Fonts中的"Open Sans"字体,权重为300,400(又名"普通"),600,700(又名"粗体")和800.手动设置数字字体权重正如所料,但使用bolder似乎跳过字体权重600.

Firefox和Chrome对此达成一致,所以我可能误解了"一步"在这种情况下的含义.

这是一个用于测试的JSFiddle,以及我得到的结果的屏幕截图.

第一部分有手动数字font-weight设置.第二个嵌套div块用样式font-weight: lighter(按预期工作),第三个嵌套div块用font-weight: bolder; 这个显示了我想要了解的效果.

我有以下按钮:

<div class="form-group">
    <button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>

现在调用一个名为的JavaScript函数 assign_all

这工作正常但是当它完成执行JavaScript时它只是尝试加载页面.这很奇怪(就像点击A标签一样)

正如您在下面看到的,我的javaScript中没有任何内容表明它应该重新加载/加载页面:

function assign_all() {

    var info = [];
    var i = 0;
    $('.user_list').each(function () {
        if ($(this).hasClass('show')) {
            info[i] = $(this).find('.user_id').val();
            i++;
        }
    })
}

谁能告诉我为什么会这样？

我们使用此代码Tab用Enter密钥模拟密钥:

function EnterTab() {
    if (event.keyCode == 13) event.keyCode = 9;
    return false;
}

但在IE 11中keyCode只读取此代码不起作用.如何解决我的代码在IE 11中运行的问题？

我有一个h1我想适合视口的整个宽度，该视口由等宽字体中的13个字符组成。阅读有关视口大小的排版的CSS-Tricks文章后，如果要实现此目的似乎合乎逻辑，我只需要将h1的样式设置为：

h1 {
    font-size: 13vw;
    font-family: monospace;
}

但是，这是在渲染时留下了一些空间（突出显示文本以查看空白）：

（这里会有一个图像，但是我没有足够的代表，所以请单击此处获取JSFiddle）

我试过其他尺寸，font-size: 14vw;有点太大，font-size: 13.99vw;似乎刚刚好，但奇怪的font-size: 13.999vw;是仍然太大吗？

有人可以解释这里发生了什么吗？为什么等宽字体中的13个字符长的字符串的每个字符都需要大于（100/13）％的视口宽度才能适合整个视口宽度？

我刚刚在 Bootstrap 中看到它在两个地方使用 font- htmlfamily body：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

...在很多行之后：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

那么，为什么font-family在两个地方使用不同的字体呢？