use*_*032 1 safari jquery fonts
我正在把这头发拉出来.我在一个页面上使用FlexSlider,效果很好; 但是在运行时,Safari(Mac版本,而不是ios)会使页面上的字体变薄.Firefox和Chrome都没有问题.这是我的基本代码,以防万一:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" />
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flexslide.js"></script>
</head>
<body>
<div id="header"><span class="slogan">Slogan At The Top</span></div>
<h1>View These Slides</h1>
<div class="gallery">
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li><div class="slider">Element 1</div></li>
<li><div class="slider">Element 2</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我实际上假设这种情况下的代码无济于事.我觉得这更像Safari的问题和FlexSlider中的一些问题.我以为我已经将问题缩小到了FlexSlider对translate3d的使用,但它没有成功.
有没有其他人经历过Safari改变基于jQuery元素的字体厚度,甚至是像flash视频(在这种情况下不使用)？另外,我没有使用任何嵌入字体,fyi.
小智 15
分享这个,因为它解决了我的问题...我只是将以下内容添加到我的CSS文件中
html { -webkit-font-smoothing: antialiased; }
这是一个反向修复,因为它会更改页面上其余文本,使其显示为滑块中的文本.反过来这样做需要你修改flexslider javascript代码.
从这里得到这个:https://github.com/desandro/isotope/issues/209#issuecomment-7377938
这只是一个CSS修复.以下内容可防止webkit中的文本细化(safari/chrome):
.flexslider {position:relative;z-index:1}
如果您的控制导航不是绝对位于滑块上方,那么应该是全部,如果您的控制导航位于上方,就像我的一样,那么我这样做:
.flex-control-nav {position: absolute; top: 0;left:0;overflow:hidden;z-index: 2;}
隐藏的溢出被添加在.flex-control-nav因为在Firefox和Chrome中的某些布局中,在我的Macbook上,两个手指不会刷页面,而是移动页面本身至少导致移动至少100%或更多.
| 归档时间： |
|
| 查看次数： |
8675 次 |
| 最近记录： |