为什么阴影会改变文本的显示方式

Question

为什么黑条上的阴影会改变文本的显示方式？我昨天花了一整天的时间试图找出css正在改变我的文本。我终于把它缩小到了阴影。

我尝试更改阴影的x，y偏移，为文本区域添加背景颜色，不向文本区域添加阴影css，使用z-index但不能将文本显示为没有阴影。

Sample of how text changes

<style>
body{ font-family: "Arial","Helvetica",
sans- serif;margin:0;left:0;top:0;font:24px Arial;
min-width:900px;display: block; margin: 0 0 1em;}

#blackbar {height:30px;padding:4px 10px 2px;background:#000000;
box-shadow: 0 0 15px rgba(0,0,0,0.4);position:fixed;
left:0;top:0;width:100%;z-index:150;}

.date-area {float:left; color: white; padding-top: 5px 30px
;position: relative;}
</style>


<style>
body {background:#fff;}
</style>

<style>
    body {}  
</style>

<div>
<div id="blackbar">                  
<div class="date-area" id="datetxt" >Some text goes here 123456789</div> 
</div>