我最近读过很多关于调整字体大小的文章,其中大部分都是使用px作为一种不可饶恕的犯罪而嘲笑(好吧,也许不是那么糟糕,你明白了),因为它在旧浏览器中没有正确调整大小.
我真的希望有一个我自己使用的标准,过去曾经是px,只是因为它简单易懂,并且很容易实现设计中指定的确切字体大小 - 但我现在怀疑使用PX.
我最近在一个项目中使用了em,因为它需要使用jQuery创建的文本大小调整功能.但是我发现它非常令人沮丧,因为如果你有两个元素并且指定了em大小,那么em放大的方式(希望有意义)
所以我想知道使用%进行字体大小调整,我看到有几个大网站使用这种技术(即雅虎),据我所知它似乎具有em的所有优点而没有令人难以置信的恼人放大的东西.
简而言之,我只是想知道在CSS中使用%进行字体大小调整是否存在任何问题?在字体大小调整方面,它比使用PX更好吗?有没有明显的退款?
如果问题前面的问题有点多,请道歉:/我仍然习惯了整个QA的事情
我有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-weight
Chrome中的所有内容都达到900(即使另有说明)
有关此示例,请参阅此处(显然在Chrome中)
这是Chrome中的错误吗?或者我在这里做错了什么?
我在一个相对定位的元素中有一个固定的位置元素,就我而言,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
元素出现在淡入淡出元素的前面.
我发现这种行为非常奇怪...有没有办法在不移动.inner
div或改变div的CSS的情况下解决这个问题.outer
?
以上代码示例的小提琴:
我已经开始rem
在最近的项目中使用's来调整字体大小,然后使用px作为旧版IE的后备版.
我也设置了font-size
62.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) 我一直相信(虽然我现在怀疑这些信念的有效性):
div.name
Run Code Online (Sandbox Code Playgroud)
速度比:
.name
Run Code Online (Sandbox Code Playgroud)
但是我最近读到大多数CSS选择器引擎从右到左读取,在这种情况下第一个例子实际上不会更慢?因为选择器引擎会简单地找到每个具有一个名称类的元素,然后必须识别哪些是div
s?
CSS选择器引擎通常以哪种方式读取?从左到右还是从右到左?如果他们一般从右到左阅读,有人可以请我解释为什么(我看不出在选择引擎方面从右到左阅读是否有意义)?
我正在尝试熟悉我正在做的项目的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上尝试过这种方法,但是效果不是很好.
我记得在JavaScript教程中读到,通常最好避免使用单行注释,因为将来有人决定要压缩文件并删除所有空白区域.
PHP中的相同环是否正确?我是否应该使用多行注释,即使我只会占用一行,例如
echo $var; /*This code echoes a variable*/
Run Code Online (Sandbox Code Playgroud)
或者在这种情况下使用单行评论是否可以?
PHP文件是通过删除空格来压缩的,还是有点极端?
我有一个奇怪的问题,一个按钮和一些CSS,我注意到它表现得好像它坚持旧的IE5盒子模型,其中height =高度+填充.
经过一番浏览后,我发现这篇文章证实了我的假设,但没有解释为什么会这样.
有谁知道为什么所有现代浏览器(Firefox,Chrome,IE9)都对待这样的按钮元素?有没有人知道一个解决方法,使按钮元素使用盒子模型(据我所知),这些浏览器中的其他元素使用?
我正在尝试为网站创建不均匀的阴影效果,请参阅下面的示例,了解我需要实现的目标:
不幸的是我认为这不能用CSS3完成,据我所知,box-shadow属性只能用于创建均匀分布的阴影.
但是,我对CSS3/HTML5的了解不是很好,所以我想知道是否有人知道无论如何要实现这一点而不采用图像/额外div /相对和绝对定位,我宁愿避免?
我在使用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.
似乎从元素中删除类也将其从elements
HTMLCollection中删除,这对我来说完全没有意义.
您可以在此处查看此代码的示例.
尝试使用如下代码从某些元素中删除某个类时遇到此问题:
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的奇怪隐藏功能?
css ×7
html ×4
php ×2
browser ×1
buffer ×1
commenting ×1
css-position ×1
css3 ×1
font-size ×1
fonts ×1
http ×1
javascript ×1
z-index ×1