小编Jac*_*ski的帖子

CSS:如何获取浏览器滚动条宽度?(for:hover {overflow:auto}不错的边距)

我不确定标题是否清楚,所以解释的话很少.我有几个小元素,比方说div(200pxx 400px常数).在每个内部,有一个段落有大约20行文本.当然,这对于一个可怜的小div来说很重要.我想做的是:

  1. 通常divoverflow: hidden属性.
  2. 在鼠标over(:hover)上,此属性更改为overflow: auto;,并显示滚动条.

问题是什么?我想在段落文本和滚动条之间留一点空间(填充或边距).让我们说该段有一个对称的margin: 20px;.但是在:hover触发器打开后,会出现滚动条,并且段落的整个右侧都会"scrollbar-width" px向左移动.句子在其他行中被打破,整个段落看起来不同,这非常烦人且不方便用户使用.我怎样才能设置我的CSS,所以悬停后唯一的变化就是scroolbar的外观?

换一种说法:

/* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}

/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical …
Run Code Online (Sandbox Code Playgroud)

html css scrollbar width css3

13
推荐指数
7
解决办法
2万
查看次数

HTML5内联SVG autocrop空格

我有一个使用php和数据库中的一些数据生成的SVG图(复杂一点).在那种情况下,我无法预测svg和任何东西上的标签长度​​.图表是动态生成的,数据始终是未知的.这就是为什么,我从这开始:

<svg class="chart" id="chart1" viewBox="0 0 1000 1000">
Run Code Online (Sandbox Code Playgroud)

我正在设置巨大的viewbox(1000,1000),我开始在这个视图框的中间生成SVG.之后,有些元素有时靠近左边,另一个元素靠近顶部,例如在底部我有200个空白矩形.

是否有任何选项可以在SVG中自动切换空白以匹配内容?我有一种直觉,认为我的想法不好,我缺少一些东西或做了一些非常错误的事情.

让我们说这可以是最终产品的一个例子(版权维基百科):http: //upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg

我没有在这里添加任何进一步的代码,因为它没有意义SVG生成函数真的是巨大而复杂的,而问题对应于最终结果.

任何解决方案或想法将不胜感激,问题对应于html5和svg(标签),但解决方案也可以是javascript或css(如果存在).


更新:我被要求进行真正的演示(最小):

.chart {
  overflow: auto;
  position: relative;
  border: 1px solid #ccc;
  width: 500px;
  background: #fff;
}
.chart .point {
  stroke: #555;
  stroke-width: 10;
  fill: #000;
}
.chart .plot {
  stroke: #aaa;
  stroke-width: 2;
}
.chart .popup {
  fill: #000;
  font-family: sans-serif;
}
.chart .axis {
  stroke: #aaa;
  stroke-width: 1;
}
.chart .grid {
  stroke: #ccc;
  stroke-width: 1;
}
.chart .legend {
  fill: …
Run Code Online (Sandbox Code Playgroud)

html5 svg margin crop

9
推荐指数
1
解决办法
6816
查看次数

HTTP2标头与旧版浏览器的兼容性

我今天听说很快http2协议将在现代浏览器中实现.更多信息:https://en.wikipedia.org/wiki/HTTP/2,我知道维基百科不是最好的资源,但它会给出一些关于发生了什么的线索.问题是:


旧浏览器如何响应http2标头?

我的意思是在php(http://php.net)上仍然有(26.02.2015)标题函数(http://php.net/manual/en/function.header.php)中的链接到http1.1规范(http ://www.faqs.org/rfcs/rfc2616).据我所知,http2我必须做的就是将标题HTTP/1.1 404 Not Found改为例如类似的东西HTTP/2.0 404 Not Found.但旧版浏览器将如何应对呢?这对于web开发者和php编码器是否透明,并在浏览器/服务器端实现,或者有一些关于兼容性的重要事项/线索?

在他们做好准备后立即使用http2标头?

我不想伤害任何人,但我知道这样一个浏览器,它的第一个名字开始在I字母上E,第二个字母,这总是搞砸了一点.我担心新的规范会彻底破坏这个浏览器的所有旧版本,而且这个http2.而且我们 - 开发人员必须编写可以正常运行的网站,无论在哪里,并且在http2经过数百万次补丁/升级/数月与旧机器的兼容性问题后,魔术才会实现.


在形成良好的问题中必须有一些代码,所以这里是:):

<?php
    header("HTTP/2.0 404 Not Found"); // Am I correct? It will look like this?
?>
Run Code Online (Sandbox Code Playgroud)

在这种情况下,旧浏览器呢?

在http2活着之后立即使用它是一个好主意吗?


附加文件:

  1. 草案http2规范:https://tools.ietf.org/html/draft-ietf-httpbis-http2-17
  2. 维基百科的几句话:https://en.wikipedia.org/wiki/HTTP/2
  3. PHP头函数:http://php.net/manual/en/function.header.php
  4. W3.org关于http2:http://www.w3.org/Protocols/HTTP/HTTP2.html

php compatibility header http-1.1

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

用户代理头——mysql存储的缩写

根据这个线程,特别是这个帖子:https : //stackoverflow.com/a/6595973/1125465,微软一如既往地炫耀。用户代理的规模可以非常非常大。

我正在用 php 开发一个小访客库,我想存储用户代理信息。我无法决定数据类型和长度。

所以我的问题是:关于如何将用户代理缩短到一些“正常”大小,您有什么想法吗?(例如 256 个字符)


注意:开发人员使用用户代理来检测用户浏览器和操作系统。所以根据链接的例子,来自 M$ 的所有愚蠢数字都只是......只是。和往常一样,让我们​​紧张。所以我们的想法是制作一个缩短用户代理字符串但不会丢失重要信息的函数。

我认为这样的功能应该:

  • 不依赖于未来的更新和新浏览器(无硬编码字符串)
  • 有一个简单的机制来决定删除什么(例如,如果有一个数字,逗号,数字,逗号,数字,逗号,数字,...,它可以删除它,这没什么意思)。
  • 最后,如果所有操作仍然导致用户代理过长(假设为 256 个字符),则无事可做,因此只需切断其余部分即可。这是百万分之一,因此数据可能会丢失。

附加说明:我知道,我可以创建一个从用户代理获取浏览器和操作系统类型的函数,并且只保存这些值。但是像往常一样,这样的函数有硬编码的名字,如果浏览器不被识别,它例如返回“无法识别的浏览器”。所以将来每个人都必须记住更新这些功能。如果我们保存缩短用户代理,信息是'不会丢失(因为只有读取数据库的脚本必须有新的识别系统)。但是数据库中的条目应该是可靠且一致的。


更新: 由于应该有一些代码,并且想法有问题,而不是现有代码的问题,我将编写一些我迄今为止编写的最小代码;):

<?php
    function shorten($useragent, $maxsize = 256) {
        $shorten = $useragent;
        ... // ?
        $shorten = substr($shorten, 0, $maxsize); // the "last hope" cut
        return $shorten;
    }
    echo shorten($_SERVER['HTTP_USER_AGENT']);
?>
Run Code Online (Sandbox Code Playgroud)

php mysql user-agent types

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

标签 统计

php ×2

compatibility ×1

crop ×1

css ×1

css3 ×1

header ×1

html ×1

html5 ×1

http-1.1 ×1

margin ×1

mysql ×1

scrollbar ×1

svg ×1

types ×1

user-agent ×1

width ×1