小编dip*_*pas的帖子

我一直在寻找StackOverflow,甚至可以找到display: inline-flex;在IE9中工作的地方.我在此之前发布了一个问题,当我在动态扩展宽度时遇到问题,在这里提问.

答案帮助了我,谢谢你,无论你是谁!既然我已经解决了这个问题,并且它在Chrome,Opera,Mozilla,Safari,IE10 +中运行良好,我仍然无法在IE9中完成这项工作.

我也尝试添加预修为display: inline-flex;,如display: -webkit-inline-box,-ms-inline-flexbox等.

我解决了整个交易的问题是width: auto;和display: inline-flex;

在这里工作小提琴

如何让它在IE9中工作？

我想为这个选定的类动态添加类.

HTML:

<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

这是一个我不想添加课程的内容:

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

JS:

$(document).ready(function(){

    var e = document.getElementById("paragraphSpaceOPtion");
    var strUser = e.options[e.selectedIndex].value;
    //console.log("option number " + strUser);

    //var masud = typeof(strUser);
    //console.log(masud);
    if(strUser == "00"){
        $(".content").addClass("option-no-00");
    }
    if(strUser == "05"){
        $(".content").addClass("option-no-05");
    }
    if(strUser == "07"){
        $(".content").addClass("option-no-07");
    }
    if(strUser == "10"){
        $(".content").addClass("option-no-10");
    }
    if(strUser == …

我想通过使用css3 calc()来使用margin-right来自动+一些像素,但似乎声明是错误的.

selector{margin: calc(auto + 5px);

那么,如何使用它可以获取自动边距和加固定像素边距？

像这样的东西!

我一直在使用一些基本的javascript和字符串连接生成的SVG元素:http://jsfiddle.net/8d3zqLsf/3/

这些SVG元件之间的间距非常小(最大1px),并且彼此之间的距离可以接受.

当我复制生成的SVG并将其渲染为普通DOM的一部分而不是在页面加载时生成时,它在SVG元素之间具有奇数间隔.http://jsfiddle.net/1n73a8yr/

注意:我已经确认SVG的宽度与其中的形状一样宽,因此额外的空间不是来自SVG.

为什么SVG在页面加载时注入时与在DOM作为一部分呈现时的呈现方式不同？有没有办法解决这个问题,而不采用负像素值的svgs上的左css属性？

HTML:

<div>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
</div>

CSS

svg {
  display:inline-block;  
  margin-left:0px;
  margin-right:0px;
  padding-left:0px;
  padding-right:0px;
}

好的,首先,我希望你们都知道我已经尝试过使用<span></span>标签(虽然可能不正确).

我的<span></span>标签有问题吗？或者有什么我需要完全不同的做法？

这是我当前创建空间的代码<br></br>:

#beforeImage span {
  padding: 40px;
}

<span id="beforeImage">text</span>

当我在chrome mobile v48中打开我的网站时,我发现该box-shadow: 1px属性表现得很奇怪:阴影的宽度从一侧到另一侧浮动并且不一样.我假设它是因为分数设备像素比率1.5:

下一个代码片段并不总是给我所需的1px阴影,但它1-3px有时在移动浏览器上浮动:

div {
   margin: 10px;
   height: 10px;
   padding: 20px;
   width: 40%;
   box-shadow: 0 0 1px #000;
}
...
<div></div>
<div></div>

的jsfiddle

我试过使用-webkit前缀但没有任何改变.使用替代单位em而不是px一个单位值就像0.5px.

该viewportmeta标签,似乎还不够:

<meta name="viewport" content="width=device-width, initial-scale=1">

如何解决这个问题,让box-shadow属性在移动浏览器上正确显示？

我正在尝试添加navbar到我的网站,但是当我添加它切换按钮不起作用.

这是我的navbar代码:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> 

这是我所包含的内容:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" …

链接的一部分不可点击.没有什么是最重要的.您甚至可以选择文本但不被视为链接.我检查了Firefox,它运行正常.就在Chrome中.

我附上一个.gif来显示正在发生的事情.

[

我用标签包裹了一个锚h1标签.全文应该被视为一个链接.正如gif所示,文本被选中,这意味着链接顶部没有任何内容,但Chrome不会将整个文本视为链接.

知道发生了什么事吗？

这是该文本的html

<h1 class="post-title">
  <a href="#">Vix sumo exerci, mel aeterno feugiat intellegam cu</a>
</h1>

编辑:

这是该项目的链接

我有一个div完整的图像:

.species {
  background-color: lightblue;
  margin-top: 20px;
  display: inline-block;
}
.animals {
  display: inline;
  margin: 0;
  margin-right: 25px;
  margin-top: 5px;
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  display: inline;
}

<div class="species">
  <div class="animals">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <!-- imagine about 30 more ants -->
  </div>
</div>

由于我的内容很受限600px,.animals包含蚂蚁包的div()包括:

但我希望它像a一样包裹<span>,以最后一只蚂蚁结尾,就像这样(在照片编辑器中创建):

但是,如果我给父级<div>内联显示或将其更改为a …

我正在使用Bootstrap 3.我有5个不同的labels,我想将它们设置width为最大值并使文本居中.

例如,每个label人width应该等于红色.

<span class="label label-md label-danger">Merkez Taraf?ndan Reddedildi</span>