相关疑难解决方法(0)

CSS/JS防止拖动鬼影？

有没有办法阻止用户看到他们试图拖动的图像的鬼魂(不关心图像的安全性,而是体验).

我试过这个解决了文本和图像上的蓝色选择而不是重影图像的问题:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Run Code Online (Sandbox Code Playgroud)

(我也尝试将图像嵌入div中,并将相同的规则应用于div).谢谢

html javascript css html5 css3

use*_*355

2012 05-05

127
推荐指数

11
解决办法

11万
查看次数

空白图像编码为data-uri

我已经构建了一个图像滑块(基于极好的bxSlider),它会在滑入视图之前及时预加载图像.它已经很好用,但我不认为我的解决方案是有效的HTML.

我的技术如下:我生成滑块标记,第一张幻灯片图像像往常一样插入(带有<img src="foo.jpg">),后续图像在数据属性中被引用<img data-orig="bar.jpg">.然后Javascript data-orig -> src在必要时调整更改,触发预加载.

换句话说,我有:

<div class="slider">
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

Run Code Online (Sandbox Code Playgroud)

为了避免空src=""属性(在某些浏览器中对性能有害),我插入了有效插入空白图像作为占位符.src="data:"

问题是,我似乎无法在文档中找到data-URI来说明这是否是一个有效的数据URI.我基本上想要解析为空白/透明图像的最小数据URI,因此浏览器可以立即解析src并继续(没有错误或网络请求).也许src="data:image/gif;base64,"会更好？

html5 web-standards data-uri

Jen*_*and

lucky-day

67
推荐指数

7
解决办法

6万
查看次数

透明单像素图像的最小文件大小

我正在寻找最小的(在文件大小方面)透明的1像素图像.

目前我有一个49字节的GIF,似乎是最受欢迎的.

但我记得多年前有一个不到40个字节.本来可以是32个字节.

谁能做得更好？只要现代Web浏览器可以显示图形格式并尊重透明度,图形格式就不用担心了.

更新:好的,我发现了一个42字节的透明单像素gif:http: //bignosebird.com/docs/h3.shtml

UPDATE2:看起来在某些客户端中,小于43字节的任何内容都可能不稳定.不能拥有那个.

graphics transparency image filesize

zaf*_*zaf

2010 04-06

62
推荐指数

6
解决办法

2万
查看次数

使用带有IMG标签的精灵？

我知道如何使用精灵,但是,IMG标签不是"src"属性吗？我总是可以使用SPAN或其他标签并设置背景/宽度/等,但它在语义上是不正确的.

基本上,我想省略SRC的IMG标签并仅使用精灵,但我担心HTML因技术原因无效.谢谢.

html css css-sprites html-validation

Rya*_*ers

2011 06-07

62
推荐指数

4
解决办法

5万
查看次数

Webkit背面可见性无法正常工作

我正在构建一个使用该-webkit-transform: rotateY属性翻转卡片的简单示例.

它在几天前工作正常,但突然间它停止工作.效果仍然有效,但当我将鼠标悬停在卡片上时,正面会消失,使背面可见.为此,我正在使用该-webkit-backface-visibility: hidden物业.但它似乎不再适用于chrome(稳定版和夜间版本)

这是代码,以防我做了可怕的坏事

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%; …

Run Code Online (Sandbox Code Playgroud)

css webkit css3

dgi*_*ian

2014 08-06

37
推荐指数

4
解决办法

4万
查看次数

Internet Explorer 11在第一次加载时忽略list-style:none

我在菜单上使用Superfish jQuery插件.在Chrome和移动Opera模拟器中,它工作正常,但在Internet Explorer 11中,CSS属性list-style:none仅适用于菜单的顶层而不适用于切换的子菜单,尽管在开发工具视图中它似乎适用于相应的元素.结果如下: 错误的菜单用过这个CSS:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}


/*** DEMO …

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery internet-explorer

Dav*_*uer

2013 12-04

36
推荐指数

5
解决办法

3万
查看次数

IMG标签上的奇怪边框

HTML:

<html>
<body>

<header>
    <img class="logo" />
</header>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS:

* {
    margin:0px;
    padding:0px;
    border:none;
}

img.logo {
    width:126px;
    height:50px;
    background-image:url('images/logo.png');
}

Run Code Online (Sandbox Code Playgroud)

每次我尝试为这样的IMG设置样式时会出现一个奇怪的边框.即使我会放置边框:0px; 或边界:无; 在img.logo css中,边界仍然存在.

html css image border

Mar*_*ark

lucky-day

33
推荐指数

2
解决办法

2万
查看次数

在Safari桌面和iOS中分析内存的技术？

更新了10/21:更改了标题和问题,以便可能得到答案(除了"否").

我们在Safari中遇到了泄漏(在Windows和Mac中确认,在iOS中被怀疑). ~~是否有任何Safari扩展允许一个配置文件JavaScript/DOM内存使用来发现潜在的泄漏？更好的是,有没有可以在iOS或Apple iOS模拟器上使用的工具？~~在Safari中发现可能导致JavaScript/DOM内存泄漏的建议技术是什么？有没有人知道任何访问iOS内存信息的方法？

背景

我们正在开发一个使用单页应用程序范例的iOS Safari Web应用程序,加载100个全屏图像.我们通过重置图像标签的源来实现正常的6.5 MB iOS Safari图像限制,但现在我们遇到了我认为iOS Safari中的内存泄漏.加载~250-300图像后,iOS Safari只会停止加载图像,因为我们怀疑是内存泄漏.不出意外,因为Safari for Windows和Safari for Mac都出现了同样的泄漏 - 在Windows上它特别糟糕; 对于每个新的全屏高分辨率图像,消耗另外10-15 MB的内存,如果我们切换到较低分辨率的图像,它仍然吞噬每个图像约5 MB.

在Windows中,我们将泄漏分离为在浏览器视口中渲染图像的简单行为 - 我们有一个图像轮播,即使没有DOM操作,只需通过视口转换(3d)图像,就可以分配内存并且从未发布过.在Windows上,内存消耗可以迅速升级到大约1.5 GB,此时Safari只会崩溃.在Mac上它并没有那么糟糕,但是内存很容易从一开始的100 MB跳到500 MB以上.相比之下,托管同一页面的Chrome标签/进程从大约33MB增长到大约120MB,然后稳定下来.

尝试过的变通方法

我们尝试删除单个图像标记并用占位符图像替换它们而不是重置它们,但这似乎不能缓解问题,并且还会导致性能问题,可能是由于DOM流失.有趣的是,删除/分离所有图像确实有效 - 一旦命令执行,内存就会被释放.然而,这会导致其自身的问题,管理UI状态,并且构建回车的过程也需要相当长的时间.刷新页面是另一种解决方法,但这会导致更多的UX中断.

更新04/10: 只是关于我们最终做的更新:iOS 4.2引入了一个限制,可以在122,900像素处截断3D转换的Div.不知道为什么,但它迫使我们重新设计并使用动态旋转木马而不是之前的静态幻灯片.

其次,我们发现使用带背景图像的div比图像本身效果更好.这似乎是Safari中的另一个错误,或者充其量是一个不一致的限制实现.

结束更新

~~思考？~~如果您在Safari中遇到了疑似泄漏,您的解决方法是什么？

javascript safari memory-leaks image mobile-safari

Osk*_*ard

2011 04-11

30
推荐指数

1
解决办法

2万
查看次数

通过CSS设置基于高度的元素宽度

我有一组元素,要求它们的最小宽度等于它们的高度,但未明确设置高度.目前我可以min-width通过jQuery 设置css 属性来实现这一点:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);

Run Code Online (Sandbox Code Playgroud)

是否可以直接在css中指定此行为？

这是一个展示我想要实现的目标:http://jsfiddle.net/p8PeW/

css

ver*_*ald

lucky-day

18
推荐指数

3
解决办法

2万
查看次数

延迟加载图像的源占位符

我正在使用延迟加载机制,只有在用户视口中加载相关图像时才会加载.

为此,我定义了一个data-src链接到原始图像的属性和一个base64编码的占位符图像作为src属性,以使HTML有效.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-src="/path/to/image.png" alt="some text">

Run Code Online (Sandbox Code Playgroud)

我注意到chrome缓存了base64字符串但字符串很长并且使我的HTML膨胀(我在页面上有很多图像).

所以我的问题是,使用小的base64编码或1px x 1px占位符图像是否更好？

注意:对于SEO目的,元素必须是img.我的HTML也必须有效,因此src需要一个属性.

html javascript lazy-loading

dam*_*zzi

2015 07-28

13
推荐指数

3
解决办法

6656
查看次数