小编dip*_*pas的帖子

显然不是这种情况,因为每个元素都可以拥有它自己的默认值.

看这里:

https://developer.mozilla.org/en-US/docs/Web/CSS/display

初始值:内联

适用于:所有元素

当然,在这种情况下看起来更正确的文档是矛盾的.

https://www.w3schools.com/css/css_display_visibility.asp

这里有什么我想念的吗？

它似乎清楚地表明"所有元素"都将"初始值"设置为内联.

有没有办法使用较少的css calc()例程？

如果我去http://less2css.org/ 并输入以下输入(这只是一个常规的CSS规则):

width: calc(100% - 450px);

输出应该完全相同(因为它是常规的css)但是,

编译器产生的css输出是 width: calc(-350%);

有没有办法让这个工作？

我需要使用CSS属性在容器中显示图像 background-image

这里的问题是我需要呈现保持其纵横比的每个图像,并最大化图像到容器内部的图像height或图像的呈现width.

HTML:

<div class="fotowind shadow"></div>

编辑:

.fotowind容器的初始CSS属性:

.fotowind {
    overflow:hidden;
    margin-left:10px;
    background:#333;
    margin-bottom:5px;
    z-index:30;
    background-position: center center !important;
    background-repeat: no-repeat;
} 

根据窗口大小动态构建属性的代码 - 我需要调整图像的大小,保持比例,即使是一些空白区域保留在两侧:

jQuery的:

windowWidth = $(window).width();
windowHeight = $(window).height();

if (windowWidth <= 1200 && windowWidth > 768 || windowHeight < 900)
{
    $('.fotowind').css('width', '650px').css('height', '425px');
}
else if (windowWidth > 1200 || windowHeight > 900)
{
    $('.fotowind').css('width', '950px').css('height', '650px');
}

if (windowWidth <= 768)
{
    $('.fotowind').css('width', '450px').css('height', '425px');
}

产生的HTML:

<div …

我可以使用带边框宽度的calc()吗？

我想以下CSS工作:

.my-element {
  border-left-width: calc(10% + 10px);
  border-right-width: calc(10% + 20px);
}

但无论出于何种原因,我提供的任何价值calc()都没有任何边界.我在MDN上找到的文档并不清楚是否可以使用calc - 它说我应该使用Any <length> value,但这包括calc吗？

我的目标是IE9,但我在Chrome 34和Firefox 28中得到了相同的结果.我知道我也可以使用jQuery来实现这些目标,但我想尽可能避免使用它.

它长期以来被誉为许多选择器问题的答案,甚至被一些人认为是完全不必要的,但是Selectors Level 4伪类:has()(更好地称为父选择器)是唯一一个不会在CSS中实现的Level 4. ,根据W3 Spec的最新修订版.原因是它效率低下且已被JavaScript功能覆盖.

考虑到这一点,我一直在考虑如何使用纯CSS伪造这种效果.下面我提供了一种方法,Q&A风格,以实现作为答案的效果,但想知道是否有其他方法.具体来说,更有效的CSS实现,或响应式CSS实现.

<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

结果:http://i.imgur.com/DYor2yb.png

这个小提琴显示了Chrome 37的一个问题.对具有小数像素的元素使用calc(100% - 10px)函数,它总是向下舍入.这会导致奇怪的事情.

在该示例中,外部div的宽度为50.5px.两个内部div具有calc(100% - 10px)和10px作为宽度.虽然这应该是50.5,但它仍然显示红色背景.

问题似乎是在Chome 37引入的.有没有人知道这个问题是否已经被报道和/或是否会被解决？

编辑:我从评论中了解到该问题已经存在了很长时间.有没有(跨浏览器)整洁的方法来解决这个问题？

我一直在寻找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中工作？

谁能告诉我为什么这个CSS calc函数不起作用？当我检查Chrome上的元素时,它会显示"无效的属性值".

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

使用媒体查询检测视网膜显示并指定的最佳方法是什么max-width？我可以使用检测视网膜

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

如何将其添加到媒体查询？我写的吗？

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
 @media …

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

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 == …