小编Sea*_*ean的帖子

使用百分比字体大小?

我最近读过很多关于调整字体大小的文章,其中大部分都是使用px作为一种不可饶恕的犯罪而嘲笑(好吧,也许不是那么糟糕,你明白了),因为它在旧浏览器中没有正确调整大小.

我真的希望有一个我自己使用的标准,过去曾经是px,只是因为它简单易懂,并且很容易实现设计中指定的确切字体大小 - 但我现在怀疑使用PX.

我最近在一个项目中使用了em,因为它需要使用jQuery创建的文本大小调整功能.但是我发现它非常令人沮丧,因为如果你有两个元素并且指定了em大小,那么em放大的方式(希望有意义)

所以我想知道使用%进行字体大小调整,我看到有几个大网站使用这种技术(即雅虎),据我所知它似乎具有em的所有优点而没有令人难以置信的恼人放大的东西.

简而言之,我只是想知道在CSS中使用%进行字体大小调整是否存在任何问题?在字体大小调整方面,它比使用PX更好吗?有没有明显的退款?

如果问题前面的问题有点多,请道歉:/我仍然习惯了整个QA的事情

css font-size

43
推荐指数
4
解决办法
6万
查看次数

Chrome不尊重字体重量?

我有Arial作为我的基本字体,我试图在页面的不同部分使用各种字体权重(正常,粗体/ 700和900)

这似乎在Firefox和Internet Explorer中都可以正常工作,但在Google Chrome中,粗体/ 700和900之间几乎没有区别!?

看小提琴

(如果以上链接被破坏/无效)

HTML:

<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>
Run Code Online (Sandbox Code Playgroud)

CSS:

p { font-family: arial; font-size: 40px; margin: 0; }

#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }
Run Code Online (Sandbox Code Playgroud)

我用Google搜索了一下,发现了一个类似的问题,提供了一个半有用的答案:

解决:

font-weight:900; font-family:"Arial Black",Arial,sans-serif;

但是使用上面这个简单的功能可以让font-weightChrome中的所有内容都达到900(即使另有说明)

有关此示例,请参阅此处(显然在Chrome中)

这是Chrome中的错误吗?或者我在这里做错了什么?

html css fonts google-chrome

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

位置:固定z-index相对于其父级的z-index?

我在一个相对定位的元素中有一个固定的位置元素,就我而言,position: relative元素不应该对它有任何影响position: fixed(固定元素相对于窗口定位,对吧?).

但是,固定元素z-index似乎是由它的父级继承的,它的z-index不能高于其父级的z-index.

我希望我有意义吗?下面是我正在谈论的HTML示例:

.outer { 
    position: relative; 
    z-index: 2; 
}
.inner { 
    background: #fff; 
    left: 50px; 
    position: fixed; 
    top: 40px; 
    z-index: 1000000; 
}

.fade { 
    background: #555; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 3; 
}
Run Code Online (Sandbox Code Playgroud)
<div class="outer">
    <div class="inner">testing testing</div>
</div>
<div class="fade"></div>
Run Code Online (Sandbox Code Playgroud)

如果您更改以下内容:

.outer { position: relative; z-index: 4; }
Run Code Online (Sandbox Code Playgroud)

然后.inner元素出现在淡入淡出元素的前面.

我发现这种行为非常奇怪...有没有办法在不移动.innerdiv或改变div的CSS的情况下解决这个问题.outer

以上代码示例的小提琴:

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

css z-index css-position

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

Chrome不尊重body标签上的rem字体大小?

我已经开始rem在最近的项目中使用's来调整字体大小,然后使用px作为旧版IE的后备版.

我也设置了font-size62.5%,html所以我可以在样式表中更轻松地设置字体大小,然后我1.4rem在主体上设置字体大小,所以没有样式的元素有font-size至少14像素的基数,请参阅代码如下:

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
Run Code Online (Sandbox Code Playgroud)

问题是,Chrome似乎以一种奇怪的方式处理这个问题...... Chrome似乎在初始页面加载时正确设置了字体大小,但在随后的刷新中,字体大小比它们应该更大.

查看FIDDLE(HTML复制如下以供将来参考)

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font …
Run Code Online (Sandbox Code Playgroud)

html css google-chrome

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

选择器引擎在哪个方向读取?

我一直相信(虽然我现在怀疑这些信念的有效性):

div.name
Run Code Online (Sandbox Code Playgroud)

速度比:

.name
Run Code Online (Sandbox Code Playgroud)

但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢?因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是divs?

CSS选择器引擎通常以哪种方式读取?从左到右还是从右到左?如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)?

css css-selectors

9
推荐指数
2
解决办法
1381
查看次数

PHP flush()显然可以在我的Linux机器上运行,但不能在我的Windows机器上运行?

我正在尝试熟悉我正在做的项目的PHP的flush()函数,我自己编写了一些脚本,然后将它们上传到我拥有的某个webspace中; 但似乎没有一个工作.我从PHP.net的评论中选择了下面的一个并试了一下:

<?php
header( 'Content-type: text/html; charset=utf-8' );

echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
    echo $i . '<br />';
    flush();
    sleep(1);
}
echo 'End ...<br />';
Run Code Online (Sandbox Code Playgroud)

显然脚本STILL无效.

然后我读了一条评论说:

如果你调用ob_flush()和flush()并且仍然没有刷新缓冲区,那可能是因为某些防病毒软件(在这种情况下为Panda)保持缓冲区,直到页面完成加载后再将其发送到浏览器.

所以我决定在我使用Linux(Ubuntu 12.04)的机器上请求网页,因为它没有安装任何防病毒软件; 它工作得很好!

我不知道这是否与防病毒软件有关?或者Windows中的一些其他奇怪的机制阻止flush()实现它的预期目的,我在两台机器上使用相同的浏览器(Firefox 14.0.1),所以我怀疑它可能是那样.

所以我想我真正的问题是:有没有人知道反病毒软件阻止flush()实现它的预期目的(因为我似乎无法在网上找到任何关于它的东西)?如果是这样,有没有办法解决它?

编辑:只是为了清理,我很肯定这不是服务器端,我有一个运行Linux的外部Web服务器,我没有在Linux或Windows机器上本地托管这些脚本.

EDIT2:我在Linux笔记本电脑上的一个朋友家里尝试过这个,我设法让它在我的房子里工作,奇怪的是,刷新代码也没有在他们的房子里工作(相反,它只需要很长时间才能加载,所有出现在曾经)这很奇怪,因为它在我家里的这台笔记本电脑上运行,我不确定路由器是否与flush()函数有关(我真的在网上找不到任何关于这个),因为那是我能想到的唯一可以干扰它的东西.

否则我没有取得任何进展试图自己解决这个问题,这绝对不是与服务器端有关,这很奇怪,因为我似乎发现的大多数信息都是关于服务器是flush()时的问题功能不起作用:/

巧合的是,我也在我家运行Norton(而不是AVG)的PC上尝试过这种方法,但是效果不是很好.

php browser buffer http

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

多行评论与单行评论

我记得在JavaScript教程中读到,通常最好避免使用单行注释,因为将来有人决定要压缩文件并删除所有空白区域.

PHP中的相同环是否正确?我是否应该使用多行注释,即使我只会占用一行,例如

echo $var; /*This code echoes a variable*/ 
Run Code Online (Sandbox Code Playgroud)

或者在这种情况下使用单行评论是否可以?

PHP文件是通过删除空格来压缩的,还是有点极端?

php commenting

7
推荐指数
1
解决办法
1472
查看次数

为什么HTML <buttons>在所有现代浏览器中都遵循旧的IE5盒子模型?

我有一个奇怪的问题,一个按钮和一些CSS,我注意到它表现得好像它坚持旧的IE5盒子模型,其中height =高度+填充.

经过一番浏览后,我发现这篇文章证实了我的假设,但没有解释为什么会这样.

有谁知道为什么所有现代浏览器(Firefox,Chrome,IE9)都对待这样的按钮元素?有没有人知道一个解决方法,使按钮元素使用盒子模型(据我所知),这些浏览器中的其他元素使用?

html css

7
推荐指数
1
解决办法
294
查看次数

CSS3/HTML5的盒子阴影不均匀?

我正在尝试为网站创建不均匀的阴影效果,请参阅下面的示例,了解我需要实现的目标:

在此输入图像描述

不幸的是我认为这不能用CSS3完成,据我所知,box-shadow属性只能用于创建均匀分布的阴影.

但是,我对CSS3/HTML5的了解不是很好,所以我想知道是否有人知道无论如何要实现这一点而不采用图像/额外div /相对和绝对定位,我宁愿避免?

html css css3

7
推荐指数
1
解决办法
2869
查看次数

classList.remove是从HTMLCollection中删除元素的?

我在使用JavaScripts新的classList API时遇到了一些非常奇怪的行为,比如说我们有以下HTML代码:

<p class="testing">Lorem Ipsum</p>
<p class="testing">Lorem Ipsum</p>
Run Code Online (Sandbox Code Playgroud)

以下JavaScript代码:

var elements = document.getElementsByClassName("testing");
alert(elements.length);
elements[0].classList.remove("testing");
alert(elements.length);
Run Code Online (Sandbox Code Playgroud)

第一个警报将为您提供值2,而第二个警报返回1.

似乎从元素中删除类也将其从elementsHTMLCollection中删除,这对我来说完全没有意义.

您可以在此处查看此代码的示例.

尝试使用如下代码从某些元素中删除某个类时遇到此问题:

var elements = document.getElementsByClassName('testing');
var elementsLength = elements.length - 1;
for(var i = 0; i <= elementsLength ; i++)
{
    elements[i].classList.remove('testing');
}
Run Code Online (Sandbox Code Playgroud)

假设我们有两个元素,如上例所示,循环第一次成功运行,但第二次它在HTMLCollection中寻找不再存在的元素,所以我得到类似"TypeError:elements [i] undefined" ".

您可以在此处查看上述代码的示例

至少可以说这是令人沮丧的,我无法理解为什么/如何在调用classList.remove函数之前,classList.remove只会影响一次有效的数组集.我甚至无法在网上找到有关此行为的任何信息.

我在疯狂吗?或者我是否挖掘了一些没有人知道的classList api的奇怪隐藏功能?

javascript

7
推荐指数
1
解决办法
2566
查看次数