小编don*_*per的帖子

CSS - 使div继承高度

我正在尝试制作一个圆角的盒子,其中div的高度和宽度取决于内容,所以它会自动调整到它...

您可以在此处查看示例:http://pastehtml.com/view/1duizyf.html

问题是我无法获得"test_mid_left"(黑色背景)和"test_mid_right"(绿松石背景)来继承"test_mid_center"(绿色背景)的高度.我已经尝试过高度:100%和自动,但没有任何工作.那么如何让他们从内容中继承高度呢?

(我在示例的左右内容中使用"min-height:xx"的原因只是为了显示我正在谈论的是哪些框)

html css height inheritance clear

18
推荐指数
2
解决办法
10万
查看次数

CSS - div宽度取决于上面的图像大小

<html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

    .box {background:gray;border:3px solid black;float:left;}

    </style>
</head>

<body>
   
<div class="box">
    <img src="http://i.stack.imgur.com/shWOu.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p>
</div>
</body></html>
Run Code Online (Sandbox Code Playgroud)

正如您现在所看到的,带有黑色边框的框具有自动宽度,可根据内部内容进行调整.问题是我希望盒子的大小调整到里面图像的宽度.因此,如果图像的宽度类似于示例(红色框),则下方文本应停在蓝点标记处并向下移动到新行.

但是我该怎么做?

css image

15
推荐指数
1
解决办法
3万
查看次数

从ajax响应中下载pdf文件

我正在尝试让浏览器下载从ajax响应中收到的pdf文件.

灵感来自使用jquery ajax下载pdf文件我模拟了这样的点击/下载事件:

    var req = new XMLHttpRequest();
    req.open("POST", "/servicepath/Method?ids=" + ids, true);
    req.responseType = "blob";
    req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
            var blob = req.response;
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "PdfName-" + new Date().getTime() + ".pdf";
            link.click();
        }
    };
    req.send();
Run Code Online (Sandbox Code Playgroud)

不幸的是,这仅适用于Chrome,但不适用于Firefox + IE.当我尝试在最后两个浏览器中触发它时没有任何反应.

该脚本和标记被放置在iframe中,由于从CMS继承,但我不知道是否有任何影响的.

如何为所有现代浏览器优化它?

javascript pdf ajax jquery

10
推荐指数
2
解决办法
3万
查看次数

可调整大小的页面,最小宽度和位置绝对值?

我正在开发一个可调整大小的页面,右侧有一个侧面菜单,它几乎与这个简单的例子一样:

http://pastehtml.com/view/1do8cy9.html

但问题是位置auto和min-width没有按预期反应.如果拖动浏览器窗口小于500px(最小宽度设置为),红色侧面菜单将继续覆盖绿色内容.

当达到最小宽度fx 500px时,如何使侧边栏停止?

css position absolute resizable

8
推荐指数
1
解决办法
7742
查看次数

Jquery:悬停/取消悬停与模糊/焦点相结合

我一直在查看问题,但我找不到我正在寻找的东西..

我想知道如何创建一个执行以下操作的函数:

  1. 如果您将元素悬停,则元素会变为蓝色
  2. 如果您取消悬停,它将更改回默认值
  3. 如果单击它(焦点),即使您将其悬停,它也会使悬停效果保持蓝色
  4. 如果单击(模糊),它将恢复为默认颜色,鼠标悬停效果将再次起作用

我该怎么做;)?

jquery focus blur mouseover hover

6
推荐指数
1
解决办法
2万
查看次数

输入和选择元素在Chrome + Safari中添加了填充,但不是Firefox?

我注意到标准输入字段和select-elements在Chrome + Safari中添加了1或2px填充,但不是Firefox ..

你可以在这里看到一个基本的例子:http://pastehtml.com/view/aussjg3en.html

Firefox 4.0.1:不向元素添加填充

Chrome 11.0.696.68:在输入字段的顶部和左侧添加2px填充,但在select-elements上仅添加2px填充

Safari 5.0.3:在输入字段的顶部和左侧添加2px填充,但在select-elements上仅添加2px

但那是为什么呢?我可以用一些简单的CSS修复它,而不是为浏览器做特定的样式表吗?我只是希望它看起来像没有自动填充的Firefox ..

safari google-chrome input cross-browser padding

5
推荐指数
1
解决办法
8576
查看次数

display:table在webkit浏览器中添加填充/边距,但不在FF或IE中添加

我在一些盒子上工作,我被迫在div上使用以下css,以使它看起来正确:

显示:表;

它在Firefox + Internet Explorer中运行良好,但我只是注意到它在webkit浏览器(Safari/Chrome)中添加了1px边框/边距/填充,这有点移动框...我怎么能摆脱这个?

我上传了一个如何呈现它的图片示例:

http://imageshack.us/photo/my-images/854/examplez.jpg/

在样式表中是否有"简单的方法"确定您是否使用webkit浏览器?因为那样的话我可以只添加一个"保证金左:-1px" ..我知道有确定的jQuery的browsertype的一种方式,但我认为这是一种矫枉过正这个..

safari webkit google-chrome displaytag css-tables

5
推荐指数
0
解决办法
1353
查看次数

在IE7按钮上的黑色边框在textarea /输入焦点

我遇到了一个奇怪的IE7问题..

我有一些标准的CSS样式按钮,背景图片和坚实的1px蓝色边框.他们按照假设工作,除了IE7 ..

如果我在表单元素(textarea/input-field)中单击它会自动在我的按钮上添加黑色边框.有时它也会在元素处于焦点/活动状态的其他情况下发生.

你可以在这里看到一个简单的例子

在此输入图像描述

问题是我需要按钮上的边框出于样式原因,所以有没有办法在IE7中禁用此行为而不删除原始边框 - 使用CSS还是jQuery?

focus border button internet-explorer-7

4
推荐指数
1
解决办法
7955
查看次数

Handlebars,如何为助手返回的值设置条件

我正在使用一个把手助手来计算一个数组中有多少行.如果它高于2则返回true,并且它可以正常工作.看起来像这样:

define('templates/helpers/countRows', ['handlebars'], function ( Handlebars ) {
    function countRows(selectedArray) {
        var selectedArrayLength = selectedArray.length;
        if (parseInt(selectedArrayLength) > 2) {
            return true;
        }
    }
    Handlebars.registerHelper('countRows', countRows);
    return countRows;
});
Run Code Online (Sandbox Code Playgroud)

问题是我想在我的hbs模板中设置一个条件,以便在输出之前检查值是否为true.如果不是这样,我不希望它输出.我希望我能做到这样的事情:

{{#if countRows "my array"}}
    markup that only gets displayed if value is true
{{/if}}
Run Code Online (Sandbox Code Playgroud)

但不幸的是,这不是有效的..

javascript jquery templates handlebars.js ember.js

2
推荐指数
1
解决办法
262
查看次数