相关疑难解决方法(0)

编辑

正如@Joe在他的回答中所指出的,IE中的问题与媒体查询无关.

因此,我更新了旧标题:("IE中的媒体查询GLITCH")与当前标题.(还要感谢一些meta建议)

可以肯定的是,我创建了一个只包含calc函数的新FIDDLE,并且看得很低 - 我在IE中看到了与我在原始媒体查询中所做的相同(不良)行为.

另外,我注意到的一个有趣的观察是,这只发生在我在calc操作中使用除法时,但如果我使用更简单的东西calc(100% - x px)- IE处理它就好了.

我media queries用来证明一个盒子的清单.

基本上,我为每个#columns状态设置了一个媒体查询,然后我用它calc()来计算每个元素的margin-right(除了最后一列中的那些元素).

这是小提琴

现在这在chrome和firefox中运行良好 - 但是当我在IE9 +中运行它时

我看到媒体查询状态之间的故障(包括闪烁和不遵守媒体查询).

这是我正在谈论的截图

[在浏览器窗口宽度为710px时截图]:

这是一个IE错误还是我做错了什么？

我应该让3 div秒坐在一起.所以我做了一个div,我已经把三个divs,这个css样式:

div.holder div {
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */
}

和html这样:

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

它应该看起来像这样: 相反,它看起来像这样:

边框div应与灰线的末端对齐.

为什么我的内容宽度小于100%？

的jsfiddle

http://jsfiddle.net/CSS_Apprentice/ru8f6/

HTML

<div class="container">
    <div id="header"></div>
    <div id="content">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <span class="stretch"></span>
    </div>
    <div id="footer"></div>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

#header {
    border: 1px solid black;
    width: 100%;
    height: 50px;
}

#content {
    border: 2px solid #444;
    height: 125px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding-right: 25px;
    padding-left: 25px;
}

#content > div {
    border: 1px dashed black;
    width: 100px;
    height: 100px;
    vertical-align: top; …

我有一个 CSS 帮助器类，旨在强制“文本”的最后一行（或在预期用途中，内联块 div）与其余部分一样对齐。

这是我得到的代码：

.justify-all-lines
{
    text-align: justify;
    /* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.justify-all-lines > *:last-child:after
{
    display: inline-block;
    width: 100%;
    content: 'hello';
}

.blocky
{
    display: inline-block;
    /* Make inline block work in IE 6/7 */
    zoom: 1;
    *display: inline;
}

其用途如下：

<div class="justify-all-lines">
    <div class="blocky">There is stuff in here.</div> …

我有这个HTML代码:

<div class="link-area">
     <a href="/" id="parts">????????????</a>
     <a href="/catalogs/oil_mp" id="oils">?????/????????????</a>
     <div class="oil-dd"></div>
     <a href="/catalogs/accums_mp" id="accums">????????????</a>
     <a href="/catalogs/wheel_fixture_mp" id="wheel_fixtures">??????</a>
     <div class="wheel_fixture-dd">     
     </div>
     <a href="/catalogs/wheel_fixture_mp" id="parts_for_service">???????? ??? ??</a>
 </div>

它看起来像这样:

但我必须改变它,在link-areadiv中的块之间,边距设置为auto,以便所有这些块都位于以下所有宽度link-area:

我怎样才能做到这一点？请看我的JS小提琴.

所以我正在努力用 CSS 实现这个简单的概念，我也搜索了整个互联网，但找不到任何东西。我想我只是没有正确地措辞，所以我想要做的视觉形象是这样的：

顶盒应置于顶部，底盒应置于底部。然后它们之间的盒子在顶部和底部应该有相等的间距。这更像是这个答案的垂直版本：https : //stackoverflow.com/a/6880421/7150896

合理的文本http://i39.tinypic.com/2it4i3b.png

顶部显示Firefox/IE.底部是谷歌浏览器.请注意右边的小空间？

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

ul {
    padding: 0;
    margin: 0;
    width: 300px; 
    list-style-type: none;
    text-align: justify;
    background-color: #00f;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    display: inline-block;
}

a {
    color: #fff;
}

http://jsfiddle.net/EtU9j/

这个小空间从哪里来？为什么不能证明冲洗到边缘？

我有HTML/CSS布局问题:

我有4个具有相同宽度和高度的div.我想"为他们辩护",所以应该从一侧到另一侧放置它们之间相同的空间.换句话说:假设A,B,C,D是div和"|" 表示行的开始/结束.所以我希望在一行中获得3个div的效果:

|A    B    C    D|

怎么做.我能用3个div来做,但如何用4个div做到这一点？