背景

我正在使用jQuery,jQuery Validation和jQuery Autocomplete开发一个网站.我正在开发一个表单,它使用验证来确保一些表单元素有效,自动完成填充文本框,然后AJAX动态替换表单.表单包含几个表单元素,包括一些下拉列表框(...).列表框采用CSS3设计(带有Modernizr以实现向后兼容).

问题

问题出在Internet Explorer上.我正在测试IE9,但我认为它也不适用于IE7或IE8.有两个下拉选择框,两个都出现故障.当用户单击下拉箭头以显示可选选项列表时,只要鼠标在其上移动以进行选择,列表就会消失,就像用户单击鼠标一样(但没有进行选择).

其他说明: -

• 这些框在每个其他浏览器中都表现正常.
• 这些盒子使用CSS3设计.
• 如果我切换兼容性视图,那些框应该可以正常运行,尽管它们看起来很糟糕.

代码

HTML

<form name="form1" action="#" method="post" id="form1">
    <fieldset>
        <label for = "radio1">
            <input type="radio" id="radio1" name="type" value="1" checked = "checked" />
            Sell</label>
        <label for = "radio2">
            <input type="radio" id="radio2" name="type" value="2" />
            Buy</label>
    </fieldset>

    <label>Address or zipcode</label>
    <input name="address" id="address" type="text" size="40" placeholder="Address or zipcode" class="ui-helper-clearfix" />

    <label>Second Option</label>
    <select name="first_option" id="first_option">
        <option value="" disabled="disabled">Select Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>

    <label>Second Option</label>
    <select name="second_option" id="second_option"> …

我正在尝试使用css":active"伪类来点击它的动画.div向右移动10个像素,向下移动10个像素:

#myButton:active {
    margin:10px 0 0 10px;
}

请参阅此处的完整示例:http://jsfiddle.net/WdABS/

问题是,如果你单击div的顶部或左边框(在jsFiddle示例中为红色),当释放按钮时,鼠标指针不再位于div上方.因此,无论是mouseup还是click都没有被触发.

从技术上讲,这种行为非常有意义.但是,这不是最终用户所期望的,我不知道如何以干净简单的方式解决它.我试图在移动的div周围放置一个父容器并从中捕获click事件,但它似乎只是使事情变得更复杂并且也不能很好地工作.

谢谢阅读!

是否可以在 :before 伪类的内容中添加类或 ID？我知道这不起作用，但类似：

#menu {
    height: 100px;
    width: 100px;
}
#menu:before {
    class: "just-before-menu";
}
.just-before-menu {
    background: green;
    height: 100px;
    width: 100px;
}

我有两个班级HoverShow和HoverHidden.
HoverHidden元素应该至少有一个HoverShow祖先,并且只有在最近的HoverShow祖先悬停时才会显示.

.HoverHidden 
{
    display: none;
}

.HoverShow:hover .HoverHidden
{
    display: initial;
}

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
        </div>
    </div>
</div>

以上工作就好了.

但是当HoverHidden有几个HoverShow祖先时,事情变得更加复杂.

<div class="HoverShow">
    <div>
        Hover here to see message!
        <div class="HoverHidden">
            message!
            <div class="HoverShow">
                Now hover here to see another message!
                <div class="HoverHidden">
                    another message!
                    <br />
                    Hey, wait... you shouldn't see that yet!
                </div>
            </div>
        </div>
    </div>
</div>

我如何调整我的CSS以使其工作？

请注意,我对其最近的HoverShow祖先下的HoverHidden深度没有规定.

我希望能够用子跨度完全100%地填充父母的div.问题是我希望填充它的范围以themeroller为主题,并且它具有不同的填充和边距.所以我不能硬编码任何尺寸的跨度高度.

如果我尝试将跨度的高度设置为100%,那么它实际上会越过并填充更多像这个主题的100%+ 6像素(但过量因主题而异).你如何做到这一点,无论跨度的填充/边距是多少,它只能填充100%的父div？

非常感谢你的帮助.

说明问题的小提琴 - 单击按钮几次,框会缩小,显示问题.

此问题似乎只发生在Internet Explorer中.

基本上,当包含的元素white-space: pre-wrap缓慢调整大小时,IE不会重新计算自动换行,导致文本被推送到元素之外.有些重新计算确实会发生,但不是全部.看起来,调整元素的大小越多,实际完成的重新计算就越多.

缩放页面可以解决问题,但显然不是一个实用的解决方案.

当容器的大小发生变化时,如何强制IE重新计算自动换行？

这比听起来有点棘手,所以让我尽力解释.

我专门处理来自HM和Net-a-porter等网站的服装图像.我想将这些图像添加到我的网站,将它们垂直堆叠,以便创建一个装备.

我需要重新调整衬衫的尺寸,使其按比例放在牛仔裤上面.牛仔裤的尺寸固定为100px宽,250px长.当我将衬衫的大小调整到相同的宽度(100px)时,它有些匹配.使用不同的衬衫(也许是一个袖子较长,没有袖子等)将导致混合效果,并且不符合牛仔裤的100px宽度腰围.

保存后,这些图片在jpeg中包含一定量的空白区域,这些空白区域因图像而异.我尝试使用和不使用空白区域进行调整(通过将其裁剪到项目的边缘),但这也无济于事.

这一切都应该是一个自动化过程(比如在Polyvore的Pinterest上使用限幅工具),因此上述不能通过photoshop或手工完成,这使得它变得更加困难.

我的问题的屏幕截图可以在这里找到:

我也研究了像素计数器脚本,并想知道是否可以通过计算服装项目腰围的像素宽度(不包括所有白色像素数据)来完成大小调整？

我觉得我正在接触到"它无法完成,变化太多"的特殊情况,并且会喜欢某人至少指出我正确的方向.非常感谢!

我试图重用在媒体查询中设置的一组类作为mixins在整个网站中使用,而不是在html中嵌入非语义类名.

这是我的问题的一个例子.

@media (min-width: 1000px) {

    .foo{width:120px;}
    .foo-2{width:150px;}
}
@media (max-width: 999px) {

    .foo{width:110px;}
    .foo-2{width:120px;}
}

.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}

.bar-X永远不会应用任何样式.我猜可能会发生这种情况,因为LESS不会在媒体查询中创建.bar-X,因此不会应用任何内容.

这是LESS中的一个错误,还是我永远无法实现的？对此的解决方法将是理想的.

我有一个HTML表格,我想要突出显示3行的交替组,以便突出显示行0-3,不显示行4-6,突出显示行7-9等.

到目前为止我提出的最佳解决方案是:

tr:nth-child(6n + 1),
tr:nth-child(6n + 2),
tr:nth-child(6n + 3) {
   background-color:#eee;
}

可以将这些选择器压缩成单个选择器吗？

我一直在尝试用纯CSS创建一个背景(在border属性的帮助下使用CSS三角形),到目前为止我成功了.但是有一个溢出问题正在摧毁整个事情.

如上图所示; 我想要第三个立方体正好在第二个立方体的右侧(半隐藏).

CSS:

.cube {
        float: left;
        height:239px;
        width:200px;
    }

        .cube .top {
        }

         .cube .top .high{
                width: 0;
                height: 0;
                border-bottom: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            .cube .top .low {
                width: 0;
                height: 0;
                border-top: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }

        .cube .left {
            float: left;
            position: relative;
            top: -60.7px;
        }

            .cube .left .high {
                width: 0;
                height: 0;
                border-bottom: 60px solid #59BE32;
                border-right: 100px …